<commit_before>$header-height: 50px;
$header-height-tablet-up: 56px;

.header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100000;
}

.header--open {
  @include tablet-up {
    background-color: rgba(0, 0, 0, 0.08);
  }
  height: 100%;
}

.header + .l-card {
  margin-top: $header-height;

  @include tablet-up {
    margin-top: $header-height-tablet-up;
  }
}

/*
 * BAR
 */

.header-bar {
  background: linear-gradient(to bottom, #313131, #212121);
  z-index: 100002;
  position: relative;
}

.header-bar-wrapper {
  display: flex;
}

.header-startlink {
  flex: 0 1 auto;
  display: block;
  padding: 12px;
  border: none; // overwrite of global anchor-styles

  @include tablet-up {
    padding: 15px 16px;
  }

  &:hover,
  &:active,
  &:focus { // overwrite of global anchor-styles
    border: none;
  }
}

.header-logo {
  width: 39px;
  height: 26px;
}

.header-search {
  flex: 1;
  align-self: center;
  margin: 0 8px;

  @include smartphone {
    * {
      display: none;
    }
  }
}

/*
 * MENÜ
 */

.menu-button {
  flex: 0 1 auto;
  padding: 16px 16px 15px;

  font: 14px/1.14 "SRG_SSR_Regular", sans-serif;
  letter-spacing: .5px;
  color: #dadad2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  @include font-smoothing;

  transition: color .2s ease-in-out;

  border: none; // overwrite of global anchor-styles

  &:hover,
  &:active,
  &:focus { // overwrite of global anchor-styles
    border: none;
    color: #ffffff;

    .menu-button__icon span {
      background-color: #ffffff;
    }
  }

  @include tablet-up {
    padding: 20px 16px;
  }

  .header--open & {
    color: #ffffff;
  }
}

.menu-button__text {
  @include smartphone {
    display: none;
  }
}

// sass-lint:disable indentation
.menu-button__icon {
  width: 18px;
  height: 16px;
  position: relative;
  transform: rotate(0deg);
  transition: top .2s ease-in-out,
              left .2s ease-in-out,
              rotate .2s ease-in-out;

  @include tablet-up {
    display: inline-block;
    margin-right: 8px;
  }

  span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #d8d8d8;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }

  span:nth-child(1) {
    top: 0px;
  }

  span:nth-child(2),
  span:nth-child(3) {
    top: 7px;
  }

  span:nth-child(4) {
    top: 14px;
  }

  @media (min-width: 720px) {
    width: 14px;
    height: 10px;

    span {
      height: 1px;
    }

    span:nth-child(1) {
      top: 0px;
    }

    span:nth-child(2),
    span:nth-child(3) {
      top: 5px;
    }

    span:nth-child(4) {
      top: 10px;
    }
  }
}

.header--open .menu-button__icon {
  span {
    background: #ffffff;
  }
  span:nth-child(1) {
    top: 7px;
    width: 0%;
    left: 50%;
  }

  span:nth-child(2) {
    transform: rotate(45deg) scale(1.25);
  }

  span:nth-child(3) {
    transform: rotate(-45deg) scale(1.25);
  }

  span:nth-child(4) {
    top: 7px;
    width: 0%;
    left: 50%;
  }

  @media (min-width: 720px) {
    span:nth-child(1) {
      top: 5px;
    }

    span:nth-child(2) {
      transform: rotate(45deg) scale(1.1);
    }

    span:nth-child(3) {
      transform: rotate(-45deg) scale(1.1);
    }

    span:nth-child(4) {
      top: 5px;
    }
  }
}

/*
 * NAVIGATION
 */

.header-navigation {
  background: #333;
  position: absolute;
  width: 100%;
  box-shadow: $shadow-default;
  display: block;

  // enable inertia scrolling on ios devices
  -webkit-overflow-scrolling: touch;
}

.header-navigation-wrapper {
  margin: 0;

  @include tablet-up {
    margin: 32px;
  }

  @include desktop-wide {
    margin: 32px auto;
  }
}

.header-navigation {
  transition: transform .2s ease-in-out;
  transform-origin: top;
  z-index: 100001;
  transform: translateY(-100%);

  @include desktop-up {
    max-height: calc(100vh - #{$header-height-tablet-up});

    // Make header-content scrollable but prevent <-> scrollbars on IE etc.
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.header--open {
  .header-navigation {
    transform: translateY(0);
  }

  .header-bar {
    position: fixed;
    width: 100%;
    top: 0;
  }

  @include smartphone {
    .header-navigation {
      min-height: calc(100vh - #{$header-height});
      margin-top: #{$header-height};
    }
  }

  .menu-button__a11y-open {
    display: none;
  }

  .menu-button__a11y-close {
    display: block;
  }
}

.menu-button__a11y-open {
  display: block;
}

.menu-button__a11y-close {
  display: none;
}

.menu--opened {
  @include desktop-up {
    overflow: hidden;
  }

  @include tablet-up {
    body {
      position: relative;
    }
  }

  @include smartphone {
    body {
      background-color: #333333;
    }

    body > * {
      display: none;
    }

    body > .header {
      display: block;
    }
  }

  .search--overlay .header-navigation {
    margin-top: $header-height;

    @include tablet-up {
      margin-top: $header-height-tablet-up;
    }
  }
}

<commit_msg>IE11 has problems with fix widths/heights on SVG sources...<commit_after>$header-height: 50px;
$header-height-tablet-up: 56px;

.header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100000;
}

.header--open {
  @include tablet-up {
    background-color: rgba(0, 0, 0, 0.08);
  }
  height: 100%;
}

.header + .l-card {
  margin-top: $header-height;

  @include tablet-up {
    margin-top: $header-height-tablet-up;
  }
}

/*
 * BAR
 */

.header-bar {
  background: linear-gradient(to bottom, #313131, #212121);
  z-index: 100002;
  position: relative;
}

.header-bar-wrapper {
  display: flex;
}

.header-startlink {
  flex: 0 1 auto;
  display: block;
  padding: 12px;
  border: none; // overwrite of global anchor-styles

  @include tablet-up {
    padding: 15px 16px;
  }

  &:hover,
  &:active,
  &:focus { // overwrite of global anchor-styles
    border: none;
  }
}

.header-logo {
  max-width: 39px;
  max-height: 26px;
}

.header-search {
  flex: 1;
  align-self: center;
  margin: 0 8px;

  @include smartphone {
    * {
      display: none;
    }
  }
}

/*
 * MENÜ
 */

.menu-button {
  flex: 0 1 auto;
  padding: 16px 16px 15px;

  font: 14px/1.14 "SRG_SSR_Regular", sans-serif;
  letter-spacing: .5px;
  color: #dadad2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  @include font-smoothing;

  transition: color .2s ease-in-out;

  border: none; // overwrite of global anchor-styles

  &:hover,
  &:active,
  &:focus { // overwrite of global anchor-styles
    border: none;
    color: #ffffff;

    .menu-button__icon span {
      background-color: #ffffff;
    }
  }

  @include tablet-up {
    padding: 20px 16px;
  }

  .header--open & {
    color: #ffffff;
  }
}

.menu-button__text {
  @include smartphone {
    display: none;
  }
}

// sass-lint:disable indentation
.menu-button__icon {
  width: 18px;
  height: 16px;
  position: relative;
  transform: rotate(0deg);
  transition: top .2s ease-in-out,
              left .2s ease-in-out,
              rotate .2s ease-in-out;

  @include tablet-up {
    display: inline-block;
    margin-right: 8px;
  }

  span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #d8d8d8;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }

  span:nth-child(1) {
    top: 0px;
  }

  span:nth-child(2),
  span:nth-child(3) {
    top: 7px;
  }

  span:nth-child(4) {
    top: 14px;
  }

  @media (min-width: 720px) {
    width: 14px;
    height: 10px;

    span {
      height: 1px;
    }

    span:nth-child(1) {
      top: 0px;
    }

    span:nth-child(2),
    span:nth-child(3) {
      top: 5px;
    }

    span:nth-child(4) {
      top: 10px;
    }
  }
}

.header--open .menu-button__icon {
  span {
    background: #ffffff;
  }
  span:nth-child(1) {
    top: 7px;
    width: 0%;
    left: 50%;
  }

  span:nth-child(2) {
    transform: rotate(45deg) scale(1.25);
  }

  span:nth-child(3) {
    transform: rotate(-45deg) scale(1.25);
  }

  span:nth-child(4) {
    top: 7px;
    width: 0%;
    left: 50%;
  }

  @media (min-width: 720px) {
    span:nth-child(1) {
      top: 5px;
    }

    span:nth-child(2) {
      transform: rotate(45deg) scale(1.1);
    }

    span:nth-child(3) {
      transform: rotate(-45deg) scale(1.1);
    }

    span:nth-child(4) {
      top: 5px;
    }
  }
}

/*
 * NAVIGATION
 */

.header-navigation {
  background: #333;
  position: absolute;
  width: 100%;
  box-shadow: $shadow-default;
  display: block;

  // enable inertia scrolling on ios devices
  -webkit-overflow-scrolling: touch;
}

.header-navigation-wrapper {
  margin: 0;

  @include tablet-up {
    margin: 32px;
  }

  @include desktop-wide {
    margin: 32px auto;
  }
}

.header-navigation {
  transition: transform .2s ease-in-out;
  transform-origin: top;
  z-index: 100001;
  transform: translateY(-100%);

  @include desktop-up {
    max-height: calc(100vh - #{$header-height-tablet-up});

    // Make header-content scrollable but prevent <-> scrollbars on IE etc.
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.header--open {
  .header-navigation {
    transform: translateY(0);
  }

  .header-bar {
    position: fixed;
    width: 100%;
    top: 0;
  }

  @include smartphone {
    .header-navigation {
      min-height: calc(100vh - #{$header-height});
      margin-top: #{$header-height};
    }
  }

  .menu-button__a11y-open {
    display: none;
  }

  .menu-button__a11y-close {
    display: block;
  }
}

.menu-button__a11y-open {
  display: block;
}

.menu-button__a11y-close {
  display: none;
}

.menu--opened {
  @include desktop-up {
    overflow: hidden;
  }

  @include tablet-up {
    body {
      position: relative;
    }
  }

  @include smartphone {
    body {
      background-color: #333333;
    }

    body > * {
      display: none;
    }

    body > .header {
      display: block;
    }
  }

  .search--overlay .header-navigation {
    margin-top: $header-height;

    @include tablet-up {
      margin-top: $header-height-tablet-up;
    }
  }
}


{'fraction_non_alphanumeric': 0.15159311300217693, 'fraction_numerical': 0.04076786067682565, 'mean_word_length': 2.2740524781341107, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '407872', 'n_tokens_mistral': 4353, 'n_tokens_neox': 3901, 'n_words': 808}