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

$theme: 'standard' !default;

@mixin base {
  --sbb-panel-width: #{sbb.px-to-rem-build(223)};
  --sbb-panel-inner-height: #{sbb.px-to-rem-build(167)};
  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(33)};
  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
  --sbb-panel-font-weight: 300;
  --sbb-panel-color: var(--sbb-color-1-negative);
  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
  --sbb-panel-background-color-hover: var(--sbb-color-primary);
  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
  --sbb-panel-animation-easing: var(--sbb-animation-easing);
}

@mixin breakpoint-large {
  --sbb-panel-width: #{sbb.px-to-rem-build(321)};
  --sbb-panel-inner-height: #{sbb.px-to-rem-build(240.11)};
  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(47.45)};
  --sbb-panel-font-size: var(--sbb-typo-scale-2x);
}

@mixin breakpoint-ultra {
  --sbb-panel-width: #{sbb.px-to-rem-build(428)};
  --sbb-panel-inner-height: #{sbb.px-to-rem-build(320.38)};
  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(63.31)};
  --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
  --sbb-panel-line-height: 1.2;
}