<commit_before>.navbar {
  background-color: $color-white;
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 5;

  @include medium() {
    height: 4.5rem;
  }

  &::after {
    @include section-separator(after, $color-white);
  }

  .wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: 4.5rem;
    transition: max-height .3s ease-in-out;

    @include medium() {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  &__logo {
    color: $color-red;
    font-size: 2.5rem;
    font-weight: 600;
    height: 3.5rem;
    margin-top: .5rem;

    @include medium() {
      font-size: 1.875rem;
    }

    img {
      height: 100%;
    }
  }

  &__list {
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
    padding: 0;

    @include medium() {
      display: flex;
      flex-direction: row;
    }
  }

  &__item {
    cursor: pointer;
    position: relative;
    text-align: center;
    transition:
      margin-bottom .2s ease-in .1s,
      visibility 0s linear .2s;
    visibility: hidden;

    @include medium() {
      margin-left: 1rem;
      margin-bottom: 0;
      text-align: left;
      visibility: visible;
    }

    a {
      color: $color-dark;
      text-decoration: none;
    }

    &::after {
      background-color: $color-red;
      bottom: -.2rem;
      content: '';
      height: .2rem;
      left: 0;
      position: absolute;
      transition: width .2s ease-in;
      transition-delay: .1s;
      width: 0;
    }

    &:hover::after {
      width: 100%;
    }
  }

  .menu-input {
    height: 17px;
    left: 0;
    margin-left: 1rem;
    margin-top: 1.5rem;
    opacity: 0;
    position: absolute;
    width: 1.5rem;
    z-index: 5;

    @include medium() {
      display: none;
    }

    & + .menu-icon {
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      height: 17px;
      margin-left: 1rem;
      margin-top: 1.5rem;
      position: absolute;

      @include medium() {
        display: none;
      }

      span {
        background-color: $color-dark;
        height: .2rem;
        width: 1.5rem;
        position: relative;
        transform-origin: center;
        transition:
          transform .3s ease-in,
          opacity .1s ease-in .2s,
          top .3s ease-in-out .3s,
          bottom .3s ease-in-out .3s;
      }

      span:first-child {
        top: 0;
      }

      span:last-child {
        bottom: 0;
      }
    }

    &:checked {<commit_msg>Fix stylelint errors<commit_after>.navbar {
  background-color: $color-white;
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 5;

  @include medium() {
    height: 4.5rem;
  }

  &::after {
    @include section-separator(after, $color-white);
  }

  .wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: 4.5rem;
    transition: max-height .3s ease-in-out;

    @include medium() {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  &__logo {
    color: $color-red;
    font-size: 2.5rem;
    font-weight: 600;
    height: 3.5rem;
    margin-top: .5rem;

    @include medium() {
      font-size: 1.875rem;
    }

    img {
      height: 100%;
    }
  }

  &__list {
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
    padding: 0;

    @include medium() {
      display: flex;
      flex-direction: row;
    }
  }

  &__item {
    cursor: pointer;
    position: relative;
    text-align: center;
    transition:
      margin-bottom .2s ease-in .1s,
      visibility 0s linear .2s;
    visibility: hidden;

    @include medium() {
      margin-bottom: 0;
      margin-left: 1rem;
      text-align: left;
      visibility: visible;
    }

    a {
      color: $color-dark;
      text-decoration: none;
    }

    &::after {
      background-color: $color-red;
      bottom: -.2rem;
      content: '';
      height: .2rem;
      left: 0;
      position: absolute;
      transition: width .2s ease-in;
      transition-delay: .1s;
      width: 0;
    }

    &:hover::after {
      width: 100%;
    }
  }

  .menu-input {
    height: 1.0625rem;
    left: 0;
    margin-left: 1rem;
    margin-top: 1.5rem;
    opacity: 0;
    position: absolute;
    width: 1.5rem;
    z-index: 5;

    @include medium() {
      display: none;
    }

    & + .menu-icon {
      display: flex;
      flex-direction: column;
      height: 1.0625rem;
      justify-content: space-between;
      margin-left: 1rem;
      margin-top: 1.5rem;
      position: absolute;

      @include medium() {
        display: none;
      }

      span {
        background-color: $color-dark;
        height: .2rem;
        position: relative;
        transform-origin: center;
        transition:
          transform .3s ease-in,
          opacity .1s ease-in .2s,
          top .3s ease-in-out .3s,
          bottom .3s ease-in-out .3s;
        width: 1.5rem;
      }

      span:first-child {
        top: 0;
      }

      span:last-child {
        bottom: 0;
      }
    }

    &:checked {
{'fraction_non_alphanumeric': 0.13199923032518762, 'fraction_numerical': 0.02693861843371176, 'mean_word_length': 1.7228915662650603, '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': '7546863', 'n_tokens_mistral': 1912, 'n_tokens_neox': 1783, 'n_words': 408}