/*
 * HeaderGlobal component
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/mixins/' as *;
@use 'header-shared' as shared;

pkt-header-global {
  display: block;
}

.pkt-header-global-spacer {
  height: map.get(variables.$spacing, 'size-104');

  &--tablet {
    height: map.get(variables.$spacing, 'size-88');
  }

  &--mobile {
    height: map.get(variables.$spacing, 'size-88');
  }

  &--mobile#{&}--has-user {
    height: calc(#{map.get(variables.$spacing, 'size-88')} + #{map.get(variables.$spacing, 'size-56')});
  }
}

.pkt-header-global {
  @include shared.header-chrome;
  @include shared.header-grid('pkt-header-global', map.get(variables.$spacing, 'size-88'));

  &__logo-area {
    align-items: center;
    display: inline-flex;
    padding-inline-start: map.get(variables.$spacing, 'size-32');

    .pkt-header-global--tablet & {
      padding-inline-start: map.get(variables.$spacing, 'size-16');
    }

    .pkt-header-global--mobile & {
      padding-inline-start: map.get(variables.$spacing, 'size-8');
    }
  }

  &__content,
  &__user {
    align-items: center;
    display: inline-flex;
    min-width: 0;
  }

  &__content {
    column-gap: map.get(variables.$spacing, 'size-24');

    .pkt-header-global--tablet & {
      column-gap: map.get(variables.$spacing, 'size-8');
    }

    .pkt-header-global--mobile & {
      column-gap: map.get(variables.$spacing, 'size-8');
      padding-inline-end: map.get(variables.$spacing, 'size-8');
    }
  }

  &__menu-toggle,
  &__contact {
    flex: 0 0 auto;
  }

  &__user {
    justify-self: end;
    padding-inline-end: map.get(variables.$spacing, 'size-32');

    .pkt-header-global--tablet:not(.pkt-header-global--mobile) & {
      padding-inline-end: map.get(variables.$spacing, 'size-16');
    }
  }

  &__user-container {
    position: relative;
    flex: 0 0 auto;

    &.is-open {
      z-index: 100;
    }
  }

  @include shared.header-logo(3.2rem);

  &__search {
    flex: 0 1 auto;
    width: 22rem;
    max-width: 100%;
    min-width: 0;

    .pkt-searchinput,
    .pkt-searchinput__field {
      width: 100%;
    }
  }

  &__contact {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  &__user-button {
    max-width: 20rem;

    .pkt-btn__text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1 1 auto;
    }
  }

  &__user-menu {
    position: absolute;
    right: 0;
    width: max(15.5rem, 100%);
    max-width: min(32rem, 90vw);

    &.is-open {
      z-index: 100;
    }
  }

  &__search-toggle {
    &,
    & button {
      flex: 0 0 auto;
      border-radius: 50%;
    }
  }

  &--mobile &__menu-toggle {
    &,
    & button {
      border-radius: 50%;
    }
  }

  &__menu,
  &__search-panel {
    position: fixed;
    top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-104')}));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background-color: rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    &--tablet,
    &--mobile {
      top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-88')}));
    }
  }

  &__menu .pkt-header-menu {
    width: min(var(--pkt-header-global-width, 100%), 75rem);
    margin: 0 0 0
      calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
    box-shadow:
      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  }

  &__search-panel-inner {
    margin-inline-start: var(--pkt-header-global-left, 0px);
    width: var(--pkt-header-global-width, 100%);
    background-color: var(--pkt-color-background-default);
    border-bottom: 1px solid var(--pkt-color-border-subtle);
    box-shadow:
      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: map.get(variables.$spacing, 'size-16');

    .pkt-searchinput,
    .pkt-searchinput__field {
      width: 100%;
    }
  }
}

.pkt-header-global.pkt-header-global--mobile {
  @include shared.header-mobile-user-bar('pkt-header-global');
}