.header {
  position: sticky;
  top: 0;
  width: 100%;
  border-bottom: 1px solid $color-black5;
  z-index: 5;

  &-mask {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background-color: rgba($color-black, 0.75);
    opacity: 0;
    z-index: -1;
    transition:
      opacity $transition-default,
      height 0ms $transition-time;
  }

  &-notice-bar {
    display: none;
    width: 100%;
    height: auto;
    padding: $spacing-xsm $spacing-lg;
    background-color: $color-teagreen;
    column-gap: $spacing-sm;
    align-items: center;
    // @include icon-left('@/Images/icons/alert-info-circle.svg', 32px);

    // &::before {
    //   flex: 0 0 auto;
    // }

    .txt {
      flex: 1;
    }

    .close {
      display: flex;
      @include icon-left('@/Images/icons/close.svg', 16px);

      &::before {
        flex: 0 0 auto;
      }
    }
  }

  &-content {
    position: relative;
    display: flex;
    height: 104px;
    padding-left: $spacing-lg;
    background-color: $color-white;
    justify-content: space-between;
    align-items: center;
    column-gap: $spacing-lg;

    @include media-down(md) {
      height: 80px;
    }

    @include media-down(xs) {
      height: 64px;
      padding-left: $spacing-xsm;
      gap: $spacing-xs;
    }
  }

  &__logo {
    display: flex;
    justify-content: center;
    z-index: 1;

    .logo {
      display: flex;
      width: 208px;
      height: 64px;
      @include btn-focus-visible(4px);

      @include media-down(md) {
        width: 136px;
        height: 48px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      svg {
        width: auto;
        height: 100%;
      }
    }

    .skip-nav {
      @include screen-reader;

      &:focus,
      &:focus-visible {
        @include btn-primary;
        @include btn-size-sm;

        position: absolute;
        left: $spacing-xs;
        top: $spacing-xs;
        overflow: visible;
      }
    }
  }

  &__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: calc(var(--header-top) - 1px);
    opacity: 0;
    z-index: -1;
    overflow: hidden;
    transition:
      opacity $transition-default,
      padding-top 0ms $transition-default,
      height 0ms $transition-default;

    &-wrap {
      @include grid-container;
      
      height: 0;
      min-height: 100%;
      padding: 0;
      overflow: auto;
    }

    &-menu {
      position: relative;
      width: 100%;
      max-width: $container-max-width;
      border-top: 1px solid $color-black5;
      background-color: $color-white;

      &-langs {
        position: relative;
        display: none;
        padding: $spacing-md $spacing-lg 0;

        @include media-down(md) {
          display: flex;
        }

        @include media-down(xs) {
          padding: $spacing-md $spacing-xs 0;
        }

        li {
          .nav-link {
            @include btn-invert;

            width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0 $spacing-xs;
            font-weight: $font-weight-regular;
            align-items: center;
          }

          &.active {
            .nav-link {
              font-weight: $font-weight-bold;
              text-decoration: underline;
            }
          }

          &:not(:last-child)::after {
            content: '|';
            margin: 0 2px;
            color: $color-black20;
          }
        }
      }
    }

    .main-nav {
      display: grid;
      width: 50%;
      height: fit-content;
      align-items: center;
      row-gap: $spacing-xs;
      padding: $spacing-md $spacing-lg $spacing-xl $spacing-big;
      overflow: auto;
      
      @include media-down(xl) {
        padding: $spacing-md $spacing-lg $spacing-xl;
      }

      @include media-down(lg) {
        width: 100%;
      }

      @include media-down(xs) {
        padding: $spacing-md $spacing-xs $spacing-xl;
      }

      .menu-item {
        &-link {
          position: relative;
          display: flex;
          width: fit-content;
          padding: $spacing-base $spacing-xs;
          column-gap: $spacing-sm;
          align-items: center;
          text-align: left;
          z-index: 1;
          @include link-decoration;
          @include btn-focus-visible;
          @extend %heading-5;

          @include media-down(md) {
            min-height: 44px
          }
        }

        &--has-children {
          button {
            @include icon('@/Images/icons/chevron-right.svg', 16px);
          }
        }

        &--active {
          > .menu-item-link {
            // text-decoration-color: $color-accent--hover;
          }
        }

        &--open {
          .sub-menu {
            grid-template-rows: 1fr;
            opacity: 1;
            visibility: visible;
          }
        }
      }

      .sub-menu {
        position: absolute;
        display: grid;
        right: 0;
        top: 0;
        width: 50%;
        min-height: 100%;
        padding: $spacing-md $spacing-lg $spacing-xl;
        align-items: start;
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: $transition-default;
        transition-property: grid-template-rows, opacity, visibility;

        @include media-down(lg) {
          width: 100%;
          z-index: 2;
        }

        @include media-down(xs) {
          padding: $spacing-md $spacing-xs $spacing-xl;
        }

        &::before {
          position: absolute;
          content: '';
          right: 0;
          width: 200%;
          height: 100%;
          background-color: $color-white;
          z-index: -1;

          @include media-down(lg) {
            width: 100%;
          }
        }

        &-wrap {
          display: grid;
          width: 100%;
          max-width: 420px;
          max-height: 100%;
          margin: 0 auto;
          row-gap: $spacing-sm;
          overflow: hidden;

          @include media-down(lg) {
            max-width: 100%;
          }

          &::before {
            position: absolute;
            content: '';
            left: 0;
            width: 1px;
            height: calc(100% - $spacing-md - $spacing-xl);
            background-color: $color-black20;

            @include media-down(lg) {
              display: none;
            }
          }
        }

        &-close {
          display: none;
          padding: $spacing-sm 0;
          column-gap: $spacing-xs;
          align-items: center;
          cursor: pointer;
          @include icon-left('@/Images/icons/chevron-left.svg', 16px);

          @include media-down(lg) {
            display: flex;
          }
        }
        
        &-info {
          font-size: 14px;
        }

        &-links {
          &-list {
            display: grid;
            width: fit-content;

            .menu-item {
              padding: $spacing-xs 0;

              &-link {
                @include btn-link;
                @include link-decoration;
              }
            }
          }
        }
      }
    }
  }

  &__search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: calc(var(--header-top) - 1px);
    opacity: 0;
    z-index: -1;
    overflow: hidden;
    transition:
      opacity $transition-default,
      padding-top 0ms $transition-default,
      height 0ms $transition-default;

    &-wrap {
      @include grid-container;

      @include media-down(xs) {
        padding-inline: 0;
      }        
    }

    &-form {
      padding: $spacing-md $spacing-xl;
      background-color: $color-white;

      @include media-down(xs) {
        padding: $spacing-md $spacing-xs;
      }

      .form {
        display: flex;
        width: 100%;
        
        &-input {
          width: 100%;
          height: 64px;
          padding: 0 $spacing-md;
          border: 1px solid $color-black;
          border-right: 0;
          border-radius: 2px;
          @extend %text-lg;
        }

        &-btn {
          @include btn-primary;
          @include icon('@/Images/icons/search.svg', 24px);

          width: 64px;
          height: 64px;
          padding: 12px;
        }
      }

      &-most {
        position: relative;
        display: grid;
        margin-top: $spacing-sm;
        gap: $spacing-sm;

        &-list {
          display: grid;

          li {
            display: flex;
            padding: $spacing-xs 0;
            align-items: center;
          }
        }
      }
    }
  }

  &__opt {
    display: flex;
    height: 100%;
    align-items: center;
    gap: $spacing-sm;
    z-index: 1;

    @include media-down(xs) {
      gap: $spacing-xs;
    }

    &-langs {
      position: relative;
      order: 1;

      @include media-down(md) {
        display: none;
      }

      button {
        @include btn-invert;
        @include icon('@/Images/icons/chevron-down.svg', 8px);

        width: auto;
        min-height: 44px;
        padding: 8px;
      }

      &-list {
        position: absolute;
        top: 104%;
        right: 0;
        display: grid;
        width: auto;
        padding: $spacing-xs $spacing-md;
        border-radius: 2px;
        border: 1px solid $color-black20;
        background-color: $color-white;
        row-gap: $spacing-base;
        justify-items: left;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition:
          opacity $transition-default,
          visibility 0ms $transition-default;

        li {
          a {
            display: grid;
            width: 100%;
            line-height: 24px;
            padding: $spacing-base $spacing-xs;
            @include link-decoration;
            @include btn-focus-visible;
          }
        }
      }
    }

    &-search {
      order: 2;
      @include btn-invert;
      @include icon('@/Images/icons/search.svg', 20px);

      min-height: 44px;
      width: 44px;
      padding: 4px;

      @include media-down(md) {
        @include icon('@/Images/icons/search.svg', 24px);
      }
    }

    &-login {
      order: 3;
      @include btn-primary;

      min-height: 44px;
      padding: 4px 12px;
      gap: 4px;

      @include media-down(md) {
        @include btn-invert;
        @include icon-left('@/Images/icons/login-circle.svg', 24px);

        min-height: 44px;
        width: 44px;
        padding: 4px;
        gap: 0;
        font-size: 0;

        &::before {
          font-size: 1rem;
        }
      }
    }
    
    &-burger {
      display: grid;
      height: 100%;
      aspect-ratio: 1 / 1;
      margin-left: $spacing-lg;
      outline-color: transparent;
      align-items: center;
      justify-content: center;
      order: 4;
      @include btn-hover($color-black10);
      @include icon('@/Images/icons/menu.svg', 32px);

      @include media-down(md) {
        margin-left: 0;
      }
    }
  }

  &--bar-show & {
    &-notice-bar {
      display: flex;
    }
  }

  &--nav-open &,
  &--langs-open &,
  &--search-open & {
    &-mask {
      height: 100%;
      opacity: 1;
      transition:
        opacity $transition-default,
        height 0ms 0ms;
    }
  }

  &--nav-open & {
    &__nav {
      height: 100vh;
      opacity: 1;
      z-index: 0;
      transition:
        opacity $transition-default,
        padding-top 0ms,
        height 0ms;
    }

    &__opt {
      &-burger {
        @include icon('@/Images/icons/close.svg', 32px);
      }
    }
  }

  &--langs-open & {
    &__opt {
      &-langs {
        button {
          background-color: $color-teagreen;
          @include icon('@/Images/icons/chevron-top.svg', 8px);
        }

        .header__opt-langs-list:has(:nth-child(2)) {
          opacity: 1;
          visibility: visible;
          z-index: 1;
          transition:
            opacity $transition-default,
            visibility 0ms;
            // z-index 0ms;
        }
      }
    }
  }

  &--search-open & {
    &__search {
      height: 100vh;
      opacity: 1;
      z-index: 0;
      transition:
        opacity $transition-default,
        padding-top 0ms,
        height 0ms;
    }
  }
}