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

$theme: 'standard' !default;

@mixin base {
  --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
  --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
  --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
  --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
  --sbb-menu-action-color: var(--sbb-color-2-inverted);
  --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
  --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-menu-action-forced-color-border-color: CanvasText;

  // 85vh is not an exact value but looks optimized for mobile view.
  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
  --sbb-menu-min-height: #{sbb.px-to-rem-build(48.5)};
  --sbb-menu-border-radius: var(--sbb-border-radius-4x);
  --sbb-menu-color: var(--sbb-color-2-inverted);
  --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
  --sbb-menu-animation-easing: ease;
  --sbb-menu-max-width: 100%;
  --sbb-menu-min-width: 100%;
  --sbb-menu-container-height: 100dvh;
}

@mixin breakpoint-large {
  --sbb-menu-max-width: #{sbb.px-to-rem-build(320)};
  --sbb-menu-min-width: #{sbb.px-to-rem-build(180)};
  --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
}