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

$theme: 'standard' !default;

@mixin base {
  --sbb-button-box-shadow: transparent 0 0;
  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
  --sbb-button-border-width: var(--sbb-border-width-2x);
  --sbb-button-border-disabled-style: dashed;
  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
  --sbb-button-color-disabled-text: light-dark(
    var(--sbb-color-granite),
    var(--sbb-color-aluminium)
  );
  --sbb-button-gap: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-spacing-fixed-2x),
        'lean': var(--sbb-spacing-fixed-1x),
      ),
      $theme
    )};
  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
  --sbb-button-loading-delay: 300ms;
  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
  --sbb-button-min-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-button-min-height-size-m),
        'lean': var(--sbb-button-min-height-size-s),
      ),
      $theme
    )};
  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
  --sbb-button-padding-inline: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-button-padding-inline-size-m),
        'lean': var(--sbb-button-padding-inline-size-s),
      ),
      $theme
    )};
  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
  --sbb-mini-button-color-text: var(--sbb-color-3);
  --sbb-mini-button-color-default-background: transparent;
  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
  --sbb-mini-button-color-disabled-text: light-dark(
    var(--sbb-color-granite),
    var(--sbb-color-smoke)
  );
  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
  --sbb-mini-button-group-background: var(--sbb-background-color-1);
  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
  --sbb-mini-button-group-min-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-mini-button-group-min-height-m),
        'lean': var(--sbb-mini-button-group-min-height-s),
      ),
      $theme
    )};
  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
  --sbb-mini-button-group-padding-inline: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-mini-button-group-padding-inline-m),
        'lean': var(--sbb-mini-button-group-padding-inline-s),
      ),
      $theme
    )};
}

@mixin breakpoint-large {
  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
}