/*
 * HeaderService component
 *
 * Layout breakpoints are driven by the `mobileBreakpoint` /
 * `tabletBreakpoint` props on <PktHeader>; the component measures its
 * own width via ResizeObserver and toggles `--mobile` / `--tablet`
 * modifier classes on the root accordingly. The SCSS below keys off
 * those classes — never off a fixed media/container threshold — so the
 * breakpoints follow the JS configuration.
 *
 * Class semantics (set by JS):
 *   --mobile : header width < mobileBreakpoint
 *   --tablet : header width < tabletBreakpoint
 *              (always also true when --mobile is true)
 *   neither  : header width ≥ tabletBreakpoint ("laptop" state)
 *
 * The "laptop" state is the default in the SCSS; --tablet and --mobile
 * override downward. --mobile blocks come after --tablet so they win on
 * source order when both are present.
 */

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

pkt-header-service {
  display: block;
}

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

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

  &--mobile {
    height: 5rem;
  }

  &--has-user {
    height: map.get(variables.$spacing, 'size-104');

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

    &.pkt-header-service-spacer--mobile {
      height: 7.5rem;
    }
  }

  &--compact {
    height: map.get(variables.$spacing, 'size-72');

    &.pkt-header-service-spacer--tablet {
      height: map.get(variables.$spacing, 'size-64');
    }

    &.pkt-header-service-spacer--mobile {
      height: map.get(variables.$spacing, 'size-64');
    }
  }

  &--compact#{&}--has-user {
    height: map.get(variables.$spacing, 'size-72');

    &.pkt-header-service-spacer--tablet {
      height: map.get(variables.$spacing, 'size-64');
    }

    &.pkt-header-service-spacer--mobile {
      height: 104px;
    }
  }
}

.pkt-header-service {
  --pkt-header-height: #{map.get(variables.$spacing, 'size-104')};

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

  &--mobile {
    --pkt-header-height: #{map.get(variables.$spacing, 'size-64')};

    @include bp('laptop-up') {
      --pkt-header-height: #{map.get(variables.$spacing, 'size-72')};
    }
  }

  &--compact {
    --pkt-header-height: #{map.get(variables.$spacing, 'size-72')};

    &.pkt-header-service--tablet {
      --pkt-header-height: #{map.get(variables.$spacing, 'size-64')};
    }
  }

  @include shared.header-chrome;

  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: map.get(variables.$spacing, 'size-104') auto;
  column-gap: map.get(variables.$spacing, 'size-32');

  &--tablet {
    grid-template-rows: map.get(variables.$spacing, 'size-88') auto;
    column-gap: map.get(variables.$spacing, 'size-24');
  }

  &--mobile {
    grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
    column-gap: map.get(variables.$spacing, 'size-8');
  }

  &--compact {
    grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
  }

  &__logo-area,
  &__content,
  &__user {
    display: inline-flex;
    column-gap: map.get(variables.$spacing, 'size-32');
    min-width: 0;

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

    .pkt-header-service--mobile & {
      column-gap: map.get(variables.$spacing, 'size-4');
    }
  }

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

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

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

  &__content,
  &__user {
    grid-row: 1;
    align-items: center;

    .pkt-header-service__user-button .pkt-btn__text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pkt-link {
      @include get-text('pkt-txt-18-medium');
    }
  }

  &__content {
    grid-column: 2;
  }

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

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

  &__logo {
    --fg-color: var(--pkt-color-text-body-default);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    a,
    button {
      display: flex;
      align-items: center;
    }

    svg {
      aspect-ratio: 6/3;
      height: map.get(variables.$spacing, 'size-40');
      .pkt-header-service__logo-area--without-service & {
        height: map.get(variables.$spacing, 'size-64');
      }
    }
  }

  &__service-name {
    @include get-text('pkt-txt-22-medium');

    padding-block-start: 4px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;

    text-wrap: balance;
  }

  &__service-link {
    color: var(--pkt-color-text-body-default);

    .pkt-link {
      text-decoration: none;
    }
  }

  .pkt-link {
    text-decoration: none;

    &--active {
      text-decoration: underline;
      text-underline-position: from-font;
    }

    &:active {
      text-decoration: underline;
      text-underline-position: from-font;
    }

    &:hover {
      text-decoration: underline;
      text-underline-position: from-font;
    }

    &.pkt-header-service--mobile {
      @include get-text('pkt-txt-16-medium');
    }
  }

  &__search-input {
    background-color: var(--pkt-color-background-default);
    .pkt-input-icon:not(button) svg {
      margin-inline-start: 0;
    }
  }

  &__slot-container,
  &__search-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }

  &__slot-container,
  &__slot-container .pkt-contents {
    display: flex;
    flex-direction: row;
    align-items: center;
    > * + * {
      margin-inline-start: map.get(variables.$spacing, 'size-32');
    }

    > .pkt-link + .pkt-link,
    > pkt-link + pkt-link,
    > a + a {
      margin-inline-start: map.get(variables.$spacing, 'size-24');
    }
  }

  &__user-container,
  &__search-container,
  &__slot-container,
  &__user-menu,
  &__mobile-menu {
    &.is-open {
      z-index: 100;
    }
  }

  &__user-container {
    position: relative;
  }

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

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

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

  &__logout-button {
    flex: 0 0 auto;
  }

  &__mobile-menu-container {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  &__mobile-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      max-height 200ms ease,
      opacity 150ms ease,
      transform 200ms ease;
    will-change: max-height, transform;
    pointer-events: none;
  }

  &__mobile-menu.is-open {
    max-height: calc(100dvh - var(--pkt-header-height) - #{map.get(variables.$spacing, 'size-56')});
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: translateY(0);
    > * {
      max-height: calc(100dvh - var(--pkt-header-height) - #{map.get(variables.$spacing, 'size-56')});
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &__mobile-menu {
      transition: none;
      transform: none;
    }
  }
}