.header {
  $block: #{&};

  @include position(sticky, 0);
  @include flex(row, nowrap, null, null, center);

  /* stylelint-disable-next-line @morev/bem/no-block-properties 
  -- Header must overflow all other elements */
  z-index: 99999999;
  padding: $whitespace-6 $whitespace-10;
  background-color: $color-neutral-1;
  border-block-end: 0.1rem solid $color-neutral-4;
  box-shadow: get-shadow(extra-small);

  &__wrapper {
    @include flex(row, nowrap, $whitespace-8, center);

    flex: 1;
    max-inline-size: 192rem;

    @include media-down(tablet-l) {
      justify-content: space-between;
    }
  }

  &__body {
    flex: 1;

    // @include media-down(tablet-l) {
    //   flex: none;
    // }
  }

  &__desktop {
    @include flex(row, nowrap, $whitespace-11, null, space-between);

    flex: 1;

    // @include media-down(tablet-l) {
    //   display: none;
    // }

    @include media-down(mobile-m) {
      gap: $whitespace-6;
    }
  }

  &__button-group {
    @include flex(row, nowrap, $whitespace-5);
  }

  &__action-group {
    @include flex(row, nowrap, $whitespace-6);
  }

  &__button-wrapper {
    position: relative;
  }

  &__cart-quantity {
    @include position(absolute, 0, 0);
    @include size(2rem, 2rem);
    @include flex(row, nowrap, null, center, center);

    font-size: $font-size-4;
    font-weight: $font-weight-semi-bold;
    color: $color-accent-7;
    background-color: $color-neutral-1;
    transform: translate(50%, -50%);
  }

  &__catalog-button {
    @include media-down(tablet-s) {
      display: none;
    }
  }

  &__admin-button {
    @include media-down(laptop-xs) {
      display: none;
    }
  }

  &__search {
    @include media-down(tablet-l) {
      display: none;
    }
  }
}