@charset "utf-8";

@use "sass:map";
@use "sass:math";
@use "../Foundation/variables" as *;
@use "../Foundation/mixin" as *;
@use "../Foundation/functions" as *;

.c-nav {
  align-items: center;
  display: flex;

  @include mqw-up {
    height: 100%;
  }

  &__list {
    align-items: center;
    display: flex;
    height: 100%;
    list-style: none;
  }

  &__item {
    height: 100%;
    position: relative;

    @include mqw-up {
      @include notfirst {
        margin-left: 15px;
        padding-left: 15px;
      }
    }
  }

  &__link {
    @include hoverOpacity(.8);

    align-items: center;
    display: inline-flex;
    justify-content: center;
    position: relative;

    @include mqw-up {
      height: 100%;

      &:after {
        @include icon-ini;

        background-color: #000;
        bottom: 0;
        height: 2px;
        left: 0;
        opacity: 0;
        position: absolute;
        transition: $comMS $comES;
        visibility: hidden;
        width: 100%;
      }

      &.is-current:after {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  @include mqw-down {
    background-color: #f5f6f7;
    left: 0;
    opacity: 0;
    position: absolute;
    top: map.get($map: $headerH, $key: sm);
    transition: $comMS $comES;
    visibility: hidden;
    width: 100%;
    will-change: opacity;

    .is-nav-active & {
      opacity: 1;
      visibility: visible;
    }

    &__list {
      align-items: flex-start;
      flex-direction: column;
      padding: map.get($map: $space, $key: sm);
      width: 100%;
    }

    &__item {
      width: 100%;

      @include notfirst {
        margin-top: 10px;
        padding-top: 10px;
      }
    }

    &__link {
      width: 100%;
    }
  }
}