@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-header-action-color: var(--sbb-color-1);
  --sbb-header-action-background-color: transparent;
  --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
  --sbb-header-action-min-height-m: var(--sbb-size-element-s);
  --sbb-header-action-min-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-header-action-min-height-m),
        'lean': var(--sbb-header-action-min-height-s),
      ),
      $theme
    )};
  --sbb-header-action-padding-inline-s: var(--sbb-spacing-fixed-4x);
  --sbb-header-action-padding-inline-m: var(--sbb-spacing-fixed-5x);
  --sbb-header-action-padding-inline: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-header-action-padding-inline-m),
        'lean': var(--sbb-header-action-padding-inline-s),
      ),
      $theme
    )};
  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
  --sbb-header-action-border-color: transparent;
  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
  --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
  --sbb-header-action-active-border-color: var(--sbb-header-action-color);
  --sbb-header-first-item-icon-shift: #{sbb.px-to-rem-build(2)};
  --sbb-header-background: var(--sbb-background-color-1);
  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
  --sbb-header-inset-inline-end: 0;
  --sbb-header-position: fixed;
  --sbb-header-padding-block-start: env(safe-area-inset-top, 0);

  // If --sbb-header-padding-block-start is not defined globally, it is not applied here.
  // We accept this limitation, as overriding this padding is an extremely rare use case.
  --sbb-header-vertical-spacing: calc(
    var(--sbb-header-height) + var(--sbb-header-padding-block-start)
  );
  --sbb-header-height-s: #{sbb.px-to-rem-build(52)};
  --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
  --sbb-header-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-header-height-m),
        'lean': var(--sbb-header-height-s),
      ),
      $theme
    )};
  --sbb-header-environment-background-color: var(--sbb-color-granite);
  --sbb-header-environment-color: var(--sbb-color-1-negative);
  --sbb-header-environment-size: #{sbb.px-to-rem-build(38)};
  --sbb-header-environment-rotate: 45deg;
}

@mixin forced-colors {
  --sbb-header-action-border-color: CanvasText;
  --sbb-header-action-color: LinkText;

  // Hide border with forced colors, as state is displayed on border
  --sbb-header-action-active-border-width: 0;
}

@mixin breakpoint-large {
  --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
  --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
}

@mixin rules {
  // We would like to provide the height variable globally in order that global styles can be adapted to the header size.
  // For example, the container margin can be adapted to the header height.
  // In standard theme, size='s' overrides the default (size='m').
  // In lean theme, size='m' overrides the default (size='s').
  #{sbb.theme-pattern-select(('standard': ":root:has(sbb-header[size='s'])", 'lean': ":root:has(sbb-header[size='m'])"), $theme)} {
    --sbb-header-height: #{sbb.theme-pattern-select(
        (
          'standard': var(--sbb-header-height-s),
          'lean': var(--sbb-header-height-m),
        ),
        $theme
      )};
  }

  // Move container below header
  sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
    margin-block-start: var(--sbb-header-vertical-spacing);
  }

  // Helper class for the application name and version in sbb-header.
  .sbb-header-info {
    display: flex;
    padding-inline: var(--sbb-spacing-fixed-4x);
    gap: var(--sbb-spacing-fixed-1x);
    align-items: baseline;
    color: var(--sbb-color-1);
    font-size: var(--sbb-text-font-size-xs);
    letter-spacing: var(--sbb-typo-letter-spacing-text);

    strong + * {
      font-size: var(--sbb-text-font-size-xxs);
      letter-spacing: var(--sbb-typo-letter-spacing-text);
      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
    }
  }
}