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

.selector-button {
  /* Tripled root keeps SelectorButton overrides above Button's root and variant selectors, which load later in the bundle. */
  &#{&}#{&} {
    justify-content: space-between;
    font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    color: var(--wds-selector-button-text-fill-dark, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
    background: var(--wds-selector-button-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
    box-shadow: var(--wds-shadow-x-input, 0) var(--wds-shadow-y-input, 0) var(--wds-shadow-blur-input, 0) 0
      var(--wds-shadow-fill-input, transparent) inset;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid
      var(--wds-selector-button-border-color, var(--wds-color-border-standard-secondary, var(--wsr-color-D60, #dfe5eb)));
  }

  @media (hover: hover) {
    &#{&}#{&}:hover {
      background: var(--wds-selector-button-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #f4f7ff)));
      outline-color: var(
        --wds-selector-button-border-color-hover,
        var(--wds-color-border-standard-secondary-hover, var(--wsr-color-B30, #a8caff))
      );
      color: var(--wds-selector-button-text-fill-hover-dark, var(--wds-color-text-primary, var(--wsr-color-B10, #116dff)));
    }
  }

  &#{&}#{&}:active {
    background: var(--wds-selector-button-fill-pressed, var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B30, #a8caff)));
    outline-color: var(
      --wds-selector-button-border-color-pressed,
      var(--wds-color-border-standard-secondary-active, var(--wsr-color-B30, #a8caff))
    );
    color: var(--wds-selector-button-text-fill-pressed-dark, var(--wds-color-text-primary, var(--wsr-color-B10, #116dff)));
  }

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

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

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

  &#{&}#{&}--disabled {
    background: var(--wds-selector-button-fill-disabled, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
    outline-color: var(
      --wds-selector-button-border-color-disabled,
      var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1)))
    );
    color: var(
      --wds-selector-button-text-fill-disabled,
      var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &#{&}#{&}--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-500, 30px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-small, var(--wds-space-200, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-small, var(--wds-space-100, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-small, var(--wds-space-100, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-small, var(--wds-space-100, 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-600, 36px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-medium, var(--wds-space-200, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-medium, var(--wds-space-100, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-medium, var(--wds-space-100, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-medium, var(--wds-space-100, 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-700, 42px));
    padding-inline-start: var(--wds-selector-button-padding-horizontal-left-large, var(--wds-space-200, 12px));
    padding-inline-end: var(--wds-selector-button-padding-horizontal-right-large, var(--wds-space-100, 6px));
    padding-top: var(--wds-selector-button-padding-vertical-large, var(--wds-space-100, 6px));
    padding-bottom: var(--wds-selector-button-padding-vertical-large, var(--wds-space-100, 6px));
  }

  &#{&}#{&} .button-core__content {
    margin-inline-end: var(--wds-space-100, 6px);
  }

  &#{&}#{&} .button-core__suffix,
  :global([dir='rtl']) &#{&}#{&} .button-core__suffix {
    margin: 0;
  }

  &#{&}#{&}--size-small .button-core__suffix {
    width: 18px;
    height: 18px;
  }

  &#{&}#{&}--size-medium .button-core__suffix,
  &#{&}#{&}--size-large .button-core__suffix {
    width: 24px;
    height: 24px;
  }
}