@import '../../../styles/abstracts/index';

//
// Header Navbar
//

.c-header-navbar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  column-gap: $grid-gutter-width;

  @include media-breakpoint-up(lg) {
    grid-template-rows: px-to-rem(128px);
  }

  @include media-breakpoint-between(sm, md) {
    grid-template-rows: px-to-rem(96px) auto;
  }

  @include media-breakpoint-down(xs) {
    grid-template-rows: px-to-rem(72px) auto;
  }

  &.is-menu-active {
    --c-header-navbar-menu-active-z-index: #{$g-z-index-header-menu + 1};
  }

  &__logo-area {
    display: flex;

    @include media-breakpoint-up(lg) {
      grid-column: 1/3;
    }

    @include media-breakpoint-down(md) {
      grid-column: 1/5;
    }
  }

  &__logo-link {
    z-index: var(--c-header-navbar-menu-active-z-index);
  }

  &__search {
    @include media-breakpoint-up(xl) {
      grid-column: 4/9;
    }

    @include media-breakpoint-only(lg) {
      grid-column: 4/8;
    }

    @include media-breakpoint-down(md) {
      grid-row: 2/3;
      grid-column: 1/-1;
      margin-top: gap(small);
    }
  }

  &__menu {
    @include list-unstyled($margin-bottom: 0, $margin-top: 0);

    margin-left: auto;

    @include media-breakpoint-up(xl) {
      grid-column: 9/-1;
    }

    @include media-breakpoint-only(lg) {
      grid-column: 8/-1;
    }

    @include media-breakpoint-between(sm, md) {
      grid-row: 1/2;
      grid-column: 5/-1;
    }

    @include media-breakpoint-down(xs) {
      --c-header-navbar-menu-display: none;

      &.is-active {
        --c-header-navbar-menu-display: unset;

        position: fixed;
        z-index: $g-z-index-header-menu;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding-right: pad(small);
        padding-left: pad(small);
      }
    }
  }

  &__menu-action {
    // stylelint-disable-next-line meowtec/no-px
    --c-unstyled-button-padding-ends: #{px-to-rem(2px)};
    // stylelint-disable-next-line meowtec/no-px
    --c-unstyled-button-padding-sides: #{px-to-rem(4px)};

    z-index: var(--c-header-navbar-menu-active-z-index);
    display: flex;
    grid-column-end: -1;
    margin-left: auto;
    font-size: $g-font-size-xlarge;

    @include media-breakpoint-up(sm) {
      display: none;
    }
  }
}
