@use 'Foundation/scss/input-chains.odeditor' as input;

$fill: var(--wds-selector-button-fill, var(--wds-color-black-750, #f8f6f6));
$fill-hover: var(--wds-selector-button-fill-hover, var(--wds-color-black-750, #f8f6f6));
$fill-pressed: var(--wds-selector-button-fill-pressed, var(--wds-color-black-750, #f8f6f6));
$fill-disabled: var(--wds-selector-button-fill-disabled, var(--wds-color-black-750, #f8f6f6));
$border-color: var(--wds-selector-button-border-color, var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0)));
$border-color-hover: var(--wds-selector-button-border-color-hover, var(--wds-color-border-standard-primary, var(--wsr-color-B40, #d6e6fe)));
$border-color-disabled: var(--wds-selector-button-border-color-disabled, var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0)));

.selector-button {
  &#{&}#{&} {
    background: $fill;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid $border-color;
  }

  @media (hover: hover) {
    &#{&}#{&}:hover {
      background: $fill-hover;
      outline-color: $border-color-hover;
      color: var(
        --wds-selector-button-text-fill-hover-dark,
        var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
      );
    }
  }

  &#{&}#{&}:active {
    background: $fill-pressed;
  }

  &#{&}#{&}--disabled {
    background: $fill-disabled;
    outline-color: $border-color-disabled;
  }

  &#{&}#{&}--size-small {
    border-radius: #{input.$input-border-radius-default-small};
    font-size: #{input.$input-value-font-size-small};
    line-height: #{input.$input-value-font-line-height-small};
    height: var(--wds-selector-button-size-small, var(--wds-space-750, 30px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-small, var(--wds-space-300, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-small, var(--wds-space-150, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-small, var(--wds-space-150, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-small, var(--wds-space-150, 6px));
  }

  &#{&}#{&}--size-medium {
    border-radius: #{input.$input-border-radius-default-medium};
    font-size: #{input.$input-value-font-size-medium};
    line-height: #{input.$input-value-font-line-height-medium};
    height: var(--wds-selector-button-size-medium, var(--wds-space-950, 38px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-medium, var(--wds-space-300, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-medium, var(--wds-space-150, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-medium, var(--wds-space-150, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-medium, var(--wds-space-150, 6px));
  }

  &#{&}#{&}--size-large {
    border-radius: #{input.$input-border-radius-default-large};
    font-size: #{input.$input-value-font-size-large};
    line-height: #{input.$input-value-font-line-height-large};
    height: var(--wds-selector-button-size-large, var(--wds-space-1150, 46px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-large, var(--wds-space-300, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-large, var(--wds-space-150, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-large, var(--wds-space-150, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-large, var(--wds-space-150, 6px));
  }
}