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

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

  &#{&}#{&}--skin-standard:active {
    color: var(
      --wds-selector-button-text-fill-pressed-standard,
      var(--wds-color-fill-standard-primary-active, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}#{&}--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-700, 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-800, 36px));
    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-900, 42px));
    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));
  }
}