@layer genr.component {
    @property --progress {
      syntax: '<length-percentage>';
      inherits: false;
      initial-value: 0%;
    }

    @keyframes progress {
      0% {
        --progress: 0%;
      }

      100% {
        --progress: 100%;
      }
    }

    .header {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 10;
      background-color: var(--color-darker-green);
      border-bottom: 1px solid transparent;

      /* @media (width > 1280px) { */
        @supports (animation-timeline: scroll()) {
          animation: header-transition linear forwards;
          transform-origin: 50% 50%;
          animation-timeline: scroll();
          animation-range: cover 0% cover 10rem;
        }
      /* } */
    }

    .header__logo {
      display: flex;
      transition: calc(var(--transition-duration) / 2);

      @media (width > 1280px) {
        @supports (animation-timeline: scroll()) {
          animation: logo-transition linear forwards;
          transform-origin: 0% 50%;
          animation-timeline: scroll();
          animation-range: cover 0% cover 10rem;
        }
      }

      &:hover,
      &:focus {
        .logo {
          fill: var(--color-light-patrol-hover);
        }
      }

      &:active {
        .logo {
          transform: scale(0.9);
        }
      }
    }

    .header__content {
      display: flex;
      align-items: center;
      gap: 1rem;
      max-width: var(--width-lg);
      margin: auto;
      padding: 1rem 1.5rem;

      @media (width > 1280px) {
        padding: 2.25rem 0;

        @supports (animation-timeline: scroll()) {
          animation: header-content-transition linear forwards;
          transform-origin: 50% 50%;
          animation-timeline: scroll();
          animation-range: cover 0% cover 10rem;
        }
      }
    }

    @keyframes header-transition {
      from {
        border-color: transparent;
      }

      to {
        border-color: var(--color-dark-green);
      }
    }

    @keyframes header-content-transition {
      from {
        padding-block: 2.25rem;
      }

      to {
        padding-block: 0.5rem;
      }
    }

    @keyframes logo-transition {
      from {
        transform: scale(1);
      }

      to {
        transform: scale(0.8);
      }
    }

    .header__body {
      display: flex;
      align-items: center;
      margin-left: auto;

      @media (width > 992px) {
        gap: 2rem;
      }

      > .language-switcher {
        display: none;

        @media (width > 992px) {
          display: flex;
        }
      }
    }

    .header__progress {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background-image: linear-gradient(to right, var(--color-signal-violet) 0% 0, var(--color-light-patrol) var(--progress) var(--progress), 0, transparent var(--progress) 100%);
      animation: progress linear;
      animation-timeline: scroll();
    }

    .sub-menu--desktop {
      .sub-menu__item--easy-language,
      .sub-menu__item--login {
        display: none;

        @media (width > 992px) {
          display: block;
        }
      }
    }

    /* .sub-menu--mobile {
      @media (width > 992px) {
        display: none;
      }
    } */

    .sub-menu__items {
      display: flex;
      gap: 1rem;
      margin: 0 1rem;
      padding: 0;
      list-style: none;
    }

    /* .main-menu {  } */

    .main-menu__button {
      --menu-button-size: 2.75rem;
      --menu-button-radius: var(--radius-base);

      position: relative;
      width: var(--menu-button-size);
      height: var(--menu-button-size);
      padding: 0;
      color: var(--color-white);
      background-color: var(--color-signal-violet);
      border-color: var(--color-signal-violet);
      border-radius: 0 var(--menu-button-radius);
      transition: calc(var(--transition-duration) / 2);
      cursor: pointer;

      @media (width > 992px) {
        --menu-button-size: 4rem;
        --menu-button-radius: var(--radius-xl);
      }

      &:active {
        transform: scale(0.9);
      }

      &:hover,
      &:focus {
        background-color: var(--color-signal-violet-hover);
        border-color: var(--color-signal-violet-hover);

      }

      &[aria-expanded="false"] {
        .icon--close {
          opacity: 0;
          transform: scale(0);
        }
      }

      &[aria-expanded="true"] {
        .icon--menu {
          opacity: 0;
          transform: scale(0);
        }

        .icon--close {
          opacity: 1;
          transform: scale(1) translate(-50%, -50%);
        }
      }

      .icon {
        transition: var(--transition-duration);
        fill: currentColor;
      }

      .icon--close {
        position: absolute;
        top: 50%;
        left: 50%;
      }
    }

    .main-menu__content {
      --circle-position: 100%;

      @media (width > 1400px) {
        --circle-position: calc(50vw + calc(var(--width-xl) / 2) - 8rem);
      }

      overflow: auto;
      opacity: 0.5;
      clip-path: circle(0% at var(--circle-position) -4rem);
      display: none;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      position: fixed;
      inset: var(--header-height-sm) 0 0;
      padding: 1.5rem 2.5rem;
      text-align: center;
      background-color: var(--color-darker-green);
      transform-origin: top center;
      transition: var(--transition-duration) ease allow-discrete;

      @media (width > 992px) {
        justify-content: center;
        top: var(--header-height-md);
      }

      @media (width > 1280px) {
        top: var(--header-height-lg);

        @supports (animation-timeline: scroll()) {
          animation: main-menu-transition linear forwards;
          transform-origin: 50% 50%;
          animation-timeline: scroll();
          animation-range: cover 0% cover 10rem;
        }
      }

      &.is-open {
        opacity: 1;
        display: flex;
        clip-path: circle(160% at var(--circle-position) -4rem);

        @starting-style {
          opacity: 0;
          clip-path: circle(0% at var(--circle-position) -4rem);
          transition-duration: calc(var(--transition-duration) * 2);
        }

        .main-menu__item {
          animation: main-menu-item-transition var(--transition-duration) ease forwards;
          opacity: 0;
          transform: scale(0.7) translateY(2.5rem);

          &:nth-child(1) {
            animation-delay: 0.2s;
          }

          &:nth-child(2) {
            animation-delay: 0.3s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
          }

          &:nth-child(4) {
            animation-delay: 0.5s;
          }

          &:nth-child(5) {
            animation-delay: 0.6s;
          }

          &:nth-child(6) {
            animation-delay: 0.7s;
          }

          &:nth-child(7) {
            animation-delay: 0.8s;
          }

          &:nth-child(8) {
            animation-delay: 0.9s;
          }

          &:nth-child(9) {
            animation-delay: 1s;
          }
        }
      }
    }

    @keyframes main-menu-transition {
      from {
        top: var(--header-height-lg);
      }

      to {
        top: calc(var(--header-height-lg) - 3.5rem);
      }
    }

    @keyframes main-menu-item-transition {
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .main-menu__loader {
      display: block;
      font-size: var(--font-size-lg);
      color: var(--color-white);
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: opacity var(--transition-duration), block-size var(--transition-duration);

      &.is-active {
        block-size: auto;
        opacity: 1;
      }
    }

    .main-menu__items {
      display: flex;
      flex-direction: column;
      margin: auto;
      align-items: center;
      justify-content: center;
      gap: clamp(0.25rem, 2vh, 2rem);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .main-menu__item {
      transition: calc(var(--transition-duration) / 2);

      &:has(.main-menu__link:active) {
        transform: scale(0.9);
      }
    }

    .main-menu__link {
      position: relative;
      display: block;
      font-weight: 700;
      font-size: var(--font-size-xl);
      text-decoration: none;
      color: var(--color-white);
      transition: var(--transition-duration);

      @media (width > 992px) {
        font-size: var(--font-size-3xl);
      }

      &:hover,
      &:focus,
      &.is-active {
        &::before {
          color: var(--color-light-patrol);
          clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
        }
      }

      &:hover,
      &:focus {
        transform: scale(1.1);
      }

      &.is-active {
        .main-menu__accent {
          display: block;
        }
      }

      &:active {
        transform: scale(0.9);
      }

      &::before {
        content: attr(data-text);
        position: absolute;
        left: 0;
        color: var(--color-white);
        clip-path: polygon(0 0, 0 0, 0 100%, -25% 100%);
        transition: calc(var(--transition-duration) * 2);
      }
    }

    .main-menu__accent {
      display: none;
      position: absolute;
      bottom: -1.25rem;
      left: 50%;
      fill: var(--color-sun-yellow);
      transform: translateX(-50%);
    }

    .main-menu__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;

      @media (width > 992px) {
        display: none;
      }
    }

    .quick-search {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .quick-search__description {
      font-size: var(--font-size-sm);
    }
}