@keyframes animation-nav-open {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%)
  }

  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  }
}

.nav-main__menu {
  row-gap: 4px;
}

.nav-main__menu-link,
.nav-dropdown__submenu-link {
  padding-block: 6px;
}

.nav-dropdown__submenu-link .link-text {
  font-size: var(--sort-navigation-size);
  text-transform: var(--sort-navigation-text-transform);
}

.nav-main__menu-link>.icon,
.nav-dropdown__submenu-link>.icon {
  opacity: 0.6;
  transition: transform 0.3s ease;
}

.nav-dropdown__menu-content {
  width: auto;
  min-width: 320px;
  padding-block: 36px;
  padding-inline: 48px;
  background-color: transparent;
}

.nav-dropdown__menu[open]>.nav-main__menu-link>.icon {
  transform: scaleY(-1);
}

.nav-dropdown__menu[open]>.nav-dropdown__submenu-link>.icon {
  transform: rotate(calc(-90deg * var(--transform-logical)));
}

.nav-dropdown__menu[open]>.nav-dropdown__submenu-link .link-text {
  background-position-x: var(--transform-origin-start);
  background-size: 100% var(--underline-thickness), 100% var(--underline-thickness);
}

.nav-dropdown__submenu {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.19, 1, .22, 1) 0.2s;
}

.nav-main__menu>li>.nav-dropdown__menu::before {
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: var(--z-index-popover);
  background-color: rgb(var(--color-mask) / 0.3);
  opacity: 0;
  transition: opacity 1s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
}

.nav-main__menu>li>.nav-dropdown__menu[open]::before {
  opacity: 1;
}

.nav-main__menu>li>.nav-dropdown__menu[closing]::before {
  opacity: 0;
}

.nav-dropdown__menu[open]>.nav-dropdown__menu-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--color-background));
  animation: animation-nav-open .5s forwards ease;
}

.nav-dropdown__menu[opened]>.nav-dropdown__menu-content>.nav-dropdown__submenu {
  opacity: 1;
}

.nav-dropdown__menu--mega {
  position: static;
}

.nav-dropdown__menu--mega .nav-dropdown__menu-content {
  --transform-x: 0;
  --transform-y: 0;
  --gap: 3px;

  inset-inline: var(--page-padding);
  max-width: unset;
  padding: var(--gap);
  width: calc(100% - calc(var(--page-padding)) * 2);
}

.mega-menu__submenu {
  padding: 36px;
}

.mega-menu__item {
  width: 25%;
}

.mega-menu__item--large {
  width: 75%;
}

.mega-menu__item--full {
  width: 100%;
}

.nav-dropdown__submenu .mega-menu__promos {
  gap: var(--gap);
}

.nav-dropdown__submenu .mega-menu__promo {
  flex: 0 0 calc(var(--s-width) - calc(var(--gap) * var(--size) / calc(var(--size) + 1)));
}

.mega-menu__promo-content {
  color: rgb(var(--color-text));
}

@media (pointer: fine) {
  .mega-menu__promo:has(>.mega-menu__promo-link) .media {
    transition: transform 2s cubic-bezier(.19, 1, .22, 1);
  }

  .mega-menu__promo:has(>.mega-menu__promo-link):hover .media {
    transform: scale(1.08);
  }
}