.announcement-bar__content {
  a {
    @apply text-blue-700 hover:underline;
  }
}

.header {
  transition: transform 0.3s ease;

  &--hide {
    transform: translateY(-100%);
  }
}

.icon-chevron-left,
.icon-chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 100px;
}

.icon-chevron-left::after,
.icon-chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  right: 6px;
  top: 6px;
}

.icon-chevron-left::after {
  transform: rotate(135deg);
}

.mobile-navigation {
  transition: all 0.3s ease;

  @apply -left-[90%] sm:-left-[420px];

  &--open {
    left: 0;
  }
}

.hamburger-icon {
  @apply relative -mt-2 block w-4 cursor-pointer;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;

  span {
    @apply absolute left-0 block h-0.5 w-full rounded-lg bg-gray-900 opacity-100;

    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  span:nth-child(1) {
    top: 0px;
  }

  span:nth-child(2),
  span:nth-child(3) {
    @apply top-1.5;
  }

  span:nth-child(4) {
    @apply top-3;
  }

  &.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }

  &.open span:nth-child(2) {
    transform: rotate(45deg);
  }

  &.open span:nth-child(3) {
    transform: rotate(-45deg);
  }

  &.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
}

.navigation-item {
  .navigation-item__drop {
    @apply hidden opacity-0;
    transition: opacity 0.3s;

    &--show {
      @apply flex opacity-100;
    }
  }

  &__trigger:hover + .navigation-item__drop,
  .navigation-item__drop:hover {
    @apply flex opacity-0;
    transition: opacity 0.3s;
  }

  &__trigger:hover + .navigation-item__drop--show,
  .navigation-item__drop--show:hover {
    @apply opacity-100;
  }

  &--show {
    .navigation-item__trigger {
      &::before {
        content: "";
        @apply absolute bottom-0 left-0 block h-0.5 w-full bg-primary-500;
      }
    }

    .navigation-item__drop {
      @apply opacity-100;
      transition: opacity 0.3s;
    }
  }

  &--centered-drop {
    .navigation-item__drop {
      @apply left-1/2 -translate-x-1/2;
    }
  }
  &--left-drop {
    .navigation-item__drop {
      @apply -right-3;
    }
  }
}

.secondary-slider__body {
  transition: all 0.3s ease;
  @apply -left-[100%];

  &.open {
    left: 0;
  }
}