<commit_before>@import "../../variables";
@import "../../breakpoints";
@import "../../mixins";

.nav-item {
  display: inline-block;
  padding: 18px 16px 14px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  @include fontSize(18);
  line-height: $emphasize-line-height-ratio;
  border-radius: 2px;
  transition: background-color .2s ease-in-out;

  /* fallback */
  color: $color-text-accentuation;

  /* theme */
  @supports (--foo: bar) {
    color: var(--theme-color-nav, $color-text-accentuation);
  }

  @include smartphone {
    padding: 18px 12px 16px;
    @include fontSize(16);
  }

  &:hover {
    border-bottom: 2px solid transparent;

    /* fallback */
    background-color: $color-nav-bg-hover;
    color: $color-text-accentuation;

    /* theme*/
    @supports (--foo: bar) {
      background-color: var(--theme-color-bg-hover, $color-nav-bg-hover);
      color: var(--theme-color-nav, $color-text-accentuation);
    }
  }

  &:active {
    border-bottom: 2px solid transparent;

    /* fallback */
    background-color: $color-nav-bg-active;
    color: $color-text-accentuation;

    /* theme */
    @supports (--foo: bar) {
      background-color: var(--theme-color-bg-active, $color-nav-bg-active);
      color: var(--theme-color-nav, $color-text-accentuation);
    }
  }
}

.nav-item--active,
.nav-item--active:hover,
.nav-item--active:active {
  background: none;
  opacity: 1;
  border-radius: 0; // if this one would not be overwritten, little red pixels will be displayed on the top corners (like ears)

  /* fallback */
  border-bottom-color: #f1434a;
  color: $color-accentuation-red;

  /* theme */
  @supports (--foo: bar) {
    border-bottom-color: var(--theme-color-nav-active-border, #f1434a);
    color: var(--theme-color-active, $color-accentuation-red);
  }
}

.nav-item--expandable {
  display: inline-flex;
  align-items: center;
  padding-top: 16px;
  padding-right: 4px;
  padding-bottom: 14px;
  position: relative; // prevents the icon to move relative to the nav-item's parent (see SRFCMSAL-1901 if you want to have a chuckle)

  @include tablet-up {
    padding-top: 17px;
    padding-right: 8px;
    padding-bottom: 13px;
  }

  .nav-item__icon {
    filter: none; /* fallback */
    filter: var(--theme-icon-filter, none);
    margin-top: -1px;
    margin-bottom: 1px;
    // prevents us from having to check click-events on the icon
    pointer-events: none;
    @include caret('grey', 'down', 'tiny');
    // sass-lint:disable indentation
    transition: transform .2s ease-in-out,
                margin .2s ease-in-out;
    // sass-lint:enable indentation

    &.expand-icon--open {
      margin: 0;
    }
  }
}

.nav-item--third-level {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  @include fontSize(16);

  @include smartphone {
    text-align: center;
  }

  // Override Theming for 3rd level Nav
  &,
  &:hover,
  &:active,
  &:focus {
    color: $color-text-accentuation;
  }

  &:hover {
    background-color: $color-nav-bg-hover;
  }

  &:active {
    background-color: $color-nav-bg-active;
  }
}

.nav-item--home {
  color: #22211d;
}
<commit_msg>Fixes aligment of Navigation and Logo<commit_after>@import "../../variables";
@import "../../breakpoints";
@import "../../mixins";

.nav-item {
  display: inline-block;
  padding: 18px 16px 14px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  @include fontSize(18);
  line-height: $emphasize-line-height-ratio;
  border-radius: 2px;
  transition: background-color .2s ease-in-out;

  /* fallback */
  color: $color-text-accentuation;

  /* theme */
  @supports (--foo: bar) {
    color: var(--theme-color-nav, $color-text-accentuation);
  }

  @include smartphone {
    padding: 18px 12px 16px;
    @include fontSize(16);

    &:first-of-type {
      margin-left: 4px;
    }
  }

  &:hover {
    border-bottom: 2px solid transparent;

    /* fallback */
    background-color: $color-nav-bg-hover;
    color: $color-text-accentuation;

    /* theme*/
    @supports (--foo: bar) {
      background-color: var(--theme-color-bg-hover, $color-nav-bg-hover);
      color: var(--theme-color-nav, $color-text-accentuation);
    }
  }

  &:active {
    border-bottom: 2px solid transparent;

    /* fallback */
    background-color: $color-nav-bg-active;
    color: $color-text-accentuation;

    /* theme */
    @supports (--foo: bar) {
      background-color: var(--theme-color-bg-active, $color-nav-bg-active);
      color: var(--theme-color-nav, $color-text-accentuation);
    }
  }
}

.nav-item--active,
.nav-item--active:hover,
.nav-item--active:active {
  background: none;
  opacity: 1;
  border-radius: 0; // if this one would not be overwritten, little red pixels will be displayed on the top corners (like ears)

  /* fallback */
  border-bottom-color: #f1434a;
  color: $color-accentuation-red;

  /* theme */
  @supports (--foo: bar) {
    border-bottom-color: var(--theme-color-nav-active-border, #f1434a);
    color: var(--theme-color-active, $color-accentuation-red);
  }
}

.nav-item--expandable {
  display: inline-flex;
  align-items: center;
  padding-top: 16px;
  padding-right: 4px;
  padding-bottom: 14px;
  position: relative; // prevents the icon to move relative to the nav-item's parent (see SRFCMSAL-1901 if you want to have a chuckle)

  @include tablet-up {
    padding-top: 17px;
    padding-right: 8px;
    padding-bottom: 13px;
  }

  .nav-item__icon {
    filter: none; /* fallback */
    filter: var(--theme-icon-filter, none);
    margin-top: -1px;
    margin-bottom: 1px;
    // prevents us from having to check click-events on the icon
    pointer-events: none;
    @include caret('grey', 'down', 'tiny');
    // sass-lint:disable indentation
    transition: transform .2s ease-in-out,
                margin .2s ease-in-out;
    // sass-lint:enable indentation

    &.expand-icon--open {
      margin: 0;
    }
  }
}

.nav-item--third-level {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  @include fontSize(16);

  @include smartphone {
    text-align: center;
  }

  // Override Theming for 3rd level Nav
  &,
  &:hover,
  &:active,
  &:focus {
    color: $color-text-accentuation;
  }

  &:hover {
    background-color: $color-nav-bg-hover;
  }

  &:active {
    background-color: $color-nav-bg-active;
  }
}

.nav-item--home {
  color: #22211d;
}

{'fraction_non_alphanumeric': 0.15993080673061802, 'fraction_numerical': 0.01965717880169838, 'mean_word_length': 2.6784268363215733, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '4886320', 'n_tokens_mistral': 2393, 'n_tokens_neox': 2255, 'n_words': 496}