.js-header-stick {
  .c-header {
    @screen xl {
      @apply h-24;

      .c-logo-img {
        width: 180px;
      }
    }
  }
}

.c-logo-img {
  width: 100px;

  @screen xl {
    width: 250px;
  }
}

.c-icons-list svg {
  width: 24px;
  height: 24px;

  @screen lg {
    width: 28px;
    height: 28px;
  }
}

.c-icons-list li:not(:first-child) {
  @apply ml-1;
}

.c-nav__link::before {
  content: '';
  top: 100%;

  @apply absolute left-0 h-16 w-full bg-transparent opacity-0 invisible;
}

.c-nav__link::after {
  content: '';

  height: 8px;
  width: 8px;
  right: -12px;
  top: 6px;
  transform: scale(0);

  @apply bg-black rounded-full absolute transition-all duration-300 ease-in-out;
}

.c-nav-dropdown {
  @apply absolute left-0 right-0 bg-white p-3;

  top: calc(100% + 1px);
}

.c-nav-dropdown__link::after {
  content: '';
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left bottom;

  @apply bg-black transition-all duration-300 ease-in-out absolute left-0 bottom-0;
}

.c-nav-dropdown__image-wrap {
  width: 230px;
  right: 100%;
  
  @apply opacity-0 transition-all duration-300 ease-in-out invisible;

  &--inner {
    right: calc(100% + 250px);
  }
}

.c-nav-dropdown__link:hover::after {
  transform: scaleX(1);
}

.c-nav-dropdown__link:hover + .c-nav-dropdown__image-wrap {
  @apply opacity-100 visible;
}

.c-nav-dropdown {
  transform: translateY(16px);
  @apply opacity-0 transition-all duration-300 ease-in-out invisible;
}

.c-nav__item:hover {
  .c-nav__link::after {
    transform: scale(1);
  }

  .c-nav__link::before {
    @apply opacity-100 visible;
  }

  .c-nav-dropdown {
    transform: translateY(0px);
    @apply opacity-100 visible;
  }
}

.c-nav-inner-dropdown-links {
  @apply opacity-0 invisible transition-all duration-300 ease-in-out;
}

.c-nav-dropdown-inner-item:hover {
  .c-nav-inner-dropdown-links {
    @apply opacity-100 visible; 
  }
}

.c-mobile-nav {
  top: calc(64px + 1px);
  max-height: calc(100% - 64px);

  @apply overflow-y-auto;

  @screen lg {
    display: none !important;
  }
}

.c-mobile-subnav-toggle {
  &.js-active {
    transform: rotate(-180deg);
  }
}

.c-nav-dropdown-items {
  width: 250px;
}

.c-nav-inner-dropdown-links {
  left: 100%;
  width: 250px;
}