@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/border-radius";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/custom-scrollbar";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/maps";
@use "s360-scss-toolkit";

$_safe-area-block: site-config.spacer(1);

.site-header {
  @include content-containers.bleed;

  position: sticky;
  height: calc(var(--_site-header--logo-size, #{ site-config.$site-mini-logo-size }) + ($_safe-area-block * 2));
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 10;
  pointer-events: none;

  @media (width > site-config.$small-header-mq) {
    --_site-header--logo-size: #{ site-config.$site-brand-logo-size };
  }

  &__content {
    @include content-containers.bleed-content;

    pointer-events: all;
    color: var(--color);
    display: grid;
    grid-template-columns: max-content max-content auto;
    align-items: center;
    column-gap: site-config.$column-gap;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    padding-block: $_safe-area-block;
    transition:
      all 200ms ease-in-out,
      background-color 200ms ease-in-out 200ms;
    z-index: 1;

    [data-menu-opened] &,
    [data-site-header-small] & {
      transition-delay: 0ms;
      background-color: var(--bg-color);
    }
  }

  &__menu-content {
    @include content-containers.safe-area-content;
    @extend %custom-scrollbar;

    visibility: hidden;
    height: calc(100vh - (var(--site-header-height, 0px) + var(--drupal-displace-offset-top, 0px) + var(--menu-local-tasks-height, 0px)));
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    transform: translateY(-100%);
    transition: all 200ms ease-in-out 0ms;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: calc(site-config.spacer(5));
    overflow-y: auto;
    pointer-events: all;

    [data-menu-opened] & {
      visibility: visible;
      transition-delay: 200ms;
      opacity: 1;
      // Subtract 1px from the site-header-height because of subpixel rendering.
      transform: translateY(calc(var(--site-header-height, 0) - 1px));
    }
  }

  &__menu-follow-us {
    margin-top: site-config.spacer(4);
  }

  &__utility-menu {
    display: flex;
    gap: s360-scss-toolkit.linear-scale(s360-scss-toolkit.modular-scale(-2), s360-scss-toolkit.modular-scale(0));
  }

  &__site-mode {
    margin-left: auto;
  }

  // **************************************************
  // Styles based on site mode.

  [data-site-mode="at-work"] & {
    .site-header__menu-content,
    &[data-menu-opened] .site-header__content {
      @include maps.map-to-css-vars(maps.$color-scheme-south-beach);
    }
  }

  [data-site-mode="at-play"] & {
    .site-header__menu-content,
    &[data-menu-opened] .site-header__content {
      @include maps.map-to-css-vars(maps.$color-scheme-bubblegum);
    }

    .site-header__menu-content {
      border-radius: border-radius.bottom-right();
    }
  }
}

