/*
 * Shared header patterns
 *
 * Mixins shared by the header variants (`pkt-header-service` and
 * `pkt-header-global`). The service header is the source of truth — these
 * mixins are extracted from it so the global header stays aligned.
 *
 * This file only defines mixins; it emits no CSS on its own and therefore
 * is not `@forward`ed from the component index.
 */

@use '../abstracts/functions';
@use 'sass:map';
@use '../abstracts/variables';

/**
 * Header chrome shared by every variant: base positioning plus the
 * `--fixed`, `--sticky`, `--scroll-to-hide` and `--hidden` modifier states.
 *
 * Call inside a header base block; `&` resolves to the calling class
 * (`.pkt-header-service` or `.pkt-header-global`).
 */
@mixin header-chrome {
  position: relative;
  z-index: 10;
  background-color: var(--pkt-color-background-default);
  border-bottom: 1px solid var(--pkt-color-border-subtle);

  &--fixed {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
  }

  // Stays in the document flow (no spacer needed) but pins to the top of the
  // viewport while its container is scrolled past.
  &--sticky {
    position: sticky;
    top: 0;
  }

  &--scroll-to-hide {
    transform: translate3d(0, 0, 0);
    transition: 0.5s transform ease-in-out;
  }

  &--hidden {
    transform: translate3d(0, -100%, 0);
  }
}

/**
 * Mobile user area shared by every variant: on small screens the user
 * button becomes a full-width bar with top/bottom borders and the user
 * menu renders in flow directly below it (rather than as a floating
 * dropdown). Placement of the user area into its own row is left to the
 * caller (grid row for the service header, a flex row for the global
 * header).
 *
 * `$base` is the variant's BEM block, e.g. `pkt-header-service`.
 */
/**
 * Shared header grid. Logo (col 1), a flexible content cell (col 2,
 * right-aligned) and the user cell (col 3). Row height follows
 * `--pkt-header-height`, which steps down at the tablet and mobile
 * breakpoints. On mobile the grid collapses to two columns and the user
 * cell drops to a full-width second row — the same layout the service
 * header uses.
 *
 * Call inside a header base block. `$base` is the variant's BEM block.
 * `$mobile-height` lets a variant keep a taller bar on mobile (the service
 * header drops to 64px, the global header stays at 88px).
 */
@mixin header-grid($base, $mobile-height: map.get(variables.$spacing, 'size-64')) {
  --pkt-header-height: #{map.get(variables.$spacing, 'size-104')};

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

  &--mobile {
    --pkt-header-height: #{$mobile-height};
  }

  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: var(--pkt-header-height) auto;
  column-gap: map.get(variables.$spacing, 'size-24');

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

  &--mobile {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: map.get(variables.$spacing, 'size-8');
  }

  &__logo-area {
    grid-column: 1;
    grid-row: 1;
  }

  &__content {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
  }

  &__user {
    grid-column: 3;
    grid-row: 1;
  }

  // On mobile the user cell drops to its own full-width row below the bar.
  &--mobile {
    .#{$base}__user {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: stretch;
      padding: 0;
    }
  }
}

/**
 * Standalone Oslo logo sizing shared by header variants: 64px on
 * desktop/tablet, shrinking to 32px on mobile (the same sizes the service
 * header uses for its logo without a service name).
 *
 * Call inside a header base block; `&` resolves to the calling class.
 * `$mobile-height` is the logo height on mobile (the service header drops to
 * 32px, the global header to 3.2rem).
 */
@mixin header-logo($mobile-height: map.get(variables.$spacing, 'size-32')) {
  &__logo {
    --fg-color: var(--pkt-color-text-body-default);
    flex: 0 0 auto;
    display: flex;
    align-items: center;

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

    svg {
      aspect-ratio: 6 / 3;
      height: map.get(variables.$spacing, 'size-64');
    }
  }

  &--mobile &__logo svg {
    height: #{$mobile-height};
  }
}

@mixin header-mobile-user-bar($base) {
  .#{$base}__user-container {
    background-color: var(--pkt-color-background-default);
    height: map.get(variables.$spacing, 'size-56');
    width: 100%;
    z-index: 99;
  }

  .#{$base}__user-button {
    &:is(button),
    & button {
      height: 100%;
      padding: 0 map.get(variables.$spacing, 'size-24');
      width: 100%;
      max-width: 100%;
      border: none;
      border-top: 1px solid #{functions.color-token('border-subtle')};
      border-bottom: 1px solid #{functions.color-token('border-subtle')};
    }

    &:not(button) {
      display: contents;
    }
  }

  .#{$base}__user-menu {
    max-width: 100%;
    position: unset;
  }
}