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

$theme: 'standard' !default;

// Used by `sbb-option` and `sbb-autocomplete-grid-option`
@mixin base {
  --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
  --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
  --sbb-optgroup-label-padding-end: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-spacing-fixed-2x),
        'lean': var(--sbb-spacing-fixed-1x),
      ),
      $theme
    )};
  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
  --sbb-optgroup-divider-color: var(--sbb-divider-color);
  --sbb-option-color: var(--sbb-color-3);
  --sbb-option-background-color: inherit;
  --sbb-option-background-color-hover: light-dark(var(--sbb-color-milk), var(--sbb-color-midnight));
  --sbb-option-background-color-active: var(--sbb-background-color-4);
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
  --sbb-option-min-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-size-element-s),
        'lean': var(--sbb-size-element-xxs),
      ),
      $theme
    )};
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
  --sbb-option-justify-content: start;
  --sbb-option-cursor: var(--sbb-cursor-pointer);
  --sbb-option-border-radius: var(--sbb-border-radius-4x);
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
  --sbb-option-focus-outline-offset: #{sbb.theme-pattern-select(
      (
        'standard': inherit,
        'lean': calc(-1 * var(--sbb-spacing-fixed-1x)),
      ),
      $theme
    )};
  --sbb-option-focus-outline-color: transparent;
  --sbb-option-focus-outline-inset: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-spacing-fixed-1x),
        'lean': 0 var(--sbb-spacing-fixed-1x),
      ),
      $theme
    )};
  --sbb-option-font-size: var(--sbb-text-font-size-s);
  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
  --sbb-option-hint-padding-block-end: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-spacing-fixed-2x),
        'lean': 0 var(--sbb-spacing-fixed-1x),
      ),
      $theme
    )};
  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
  --sbb-options-panel-animation-timing-function: ease;
  --sbb-options-panel-background-color: var(--sbb-background-color-2);
  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
}

@mixin rules {
  // Sets ellipsis on all sbb-option child elements
  .sbb-options-nowrap {
    --sbb-option-text-overflow: ellipsis;
    --sbb-option-overflow: hidden;
    --sbb-option-white-space: nowrap;
  }
}