@use 'modules/color_theme' as color;
@use 'modules/config' as conf;

.nav {
  $py-desktop: 24px;

  display: none;

  @include conf.desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
  }

  &__list {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;

    @include color.themed() {
      background-color: color.t('primary-lighter');
    }

    @include conf.desktop {
      display: flex;
      padding: $py-desktop 30px;

      @include color.themed() {
        background-color: color.t('accent');
      }

      &--end {
        flex-shrink: 1;
        justify-content: flex-end;
      }
    }

    &-item {
      padding: 16px 0;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;

      @include conf.desktop {
        padding-top: 0;
        padding-bottom: 0;

        &:not(:last-child) {
          @include conf.ltr {
            padding-right: 20px;
          }
          @include conf.rtl {
            padding-left: 20px;
          }
        }
      }
    }
  }

  &__link {
    &--active {
      padding-bottom: $py-desktop;

      @include conf.desktop {
        @include color.themed() {
          border-bottom: 1px solid color.t('primary');
        }
      }
    }
  }

  &--active {
    display: block;
  }
}