.header-menu-top {
   &__list {
      display: flex;
      gap: 24px;
      font-weight: 500;

      @include _HDesktop {
         gap: 40px;
      }
   }

   &__item {
      display: flex;
      gap: 6px;
      line-height: 1;
      padding: 20px 0;

      @include _HDesktop {
         padding: 33px 0;
      }
   }

   &__link {
      font-size: rem(12);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px;

      @include _HDesktop {
         font-size: rem(16);
      }
   }

   &__link-arrow svg {
      transition: transform 200ms ease-in-out;
   }

   &__drop-down-menu {
      display: none;
      position: absolute;
      left: 0;
      visibility: hidden;
      opacity: 0;
      top: 70%;
      min-width: 414px;

      @include _XSDesktop {
         display: block;
      }

      @include _HDesktop {
         min-width: 570px;
      }

      transition:
         top 200ms ease-in-out,
         opacity 100ms ease-in-out;
   }
}

.dropdown:hover .header-menu-top__drop-down-menu {
   visibility: visible;
   opacity: 1;
   top: 101%;
}

.dropdown:hover .header-menu-top__link-arrow svg {
   transform: rotate(180deg);
}
