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

$theme: 'standard' !default;

@mixin base {
  --sbb-navigation-action-color: var(--sbb-color-4-negative);
  --sbb-navigation-action-icon-display: none;
  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
  --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
  --sbb-navigation-grid-column: 1 / -1;
  --sbb-navigation-animation-easing: ease-in;
  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
  --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
  --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
  --sbb-navigation-backdrop-animation-name: backdrop-open;
  --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
  --sbb-navigation-color: var(--sbb-color-1-negative);
  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
  --sbb-navigation-expanded-width: 100%;
  --sbb-navigation-inset: 0 auto auto 0;
  --sbb-navigation-translate: -100% 0;
  --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
  --sbb-navigation-content-translate: 0;
  --sbb-navigation-width: 100%;
  --sbb-navigation-height: 100dvh;
  --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
  --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
  --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
  --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
  --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
  --sbb-navigation-marker-position-y: unset;
  --sbb-navigation-marker-width: #{sbb.px-to-rem-build(17)};
  --sbb-navigation-marker-border: var(--sbb-border-width-1x);
  --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
  --sbb-navigation-section-column: 1 / -1;
  --sbb-navigation-section-position: fixed;
  --sbb-navigation-section-pointer-events: none;
  --sbb-navigation-section-animation-easing: ease-out;
  --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
  --sbb-navigation-section-translate: 100%;
  --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
  --sbb-navigation-section-width: 100dvw;
  --sbb-navigation-section-height: 100dvh;
  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
}

@mixin breakpoint-large {
  --sbb-navigation-grid-column: 1 / 5;
  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
  --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
  --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
  --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
  --sbb-navigation-section-column: 5 / 13;
  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
  --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
    var(--sbb-layout-base-offset-responsive);
  --sbb-navigation-section-position: relative;
  --sbb-navigation-section-translate: 0;
  --sbb-navigation-section-content-padding-inline-start: 0;
  --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
}

@mixin breakpoint-ultra {
  --sbb-navigation-grid-column: 1 / 6;
  --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
  --sbb-navigation-section-column: 6 / 17;
  --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
    var(--sbb-spacing-responsive-l);
}