$fill: var(--wds-fill-button-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
$fill-hover: var(--wds-fill-button-fill-hover, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff)));
$border-width: var(--wds-fill-button-border-width, var(--wds-border-width-200, 2px));
$border-color: var(--wds-fill-button-border-color, conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg));

.fill-button {
  border-radius: var(--wds-swatches-swatch-border-radius-medium, var(--wds-border-radius-full, 1000px));
  background-color: $fill;

  &:not(&--fill, &--disabled) {
    border: $border-width solid transparent;
    background: linear-gradient($fill, $fill), $border-color;
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &:active {
    background-color: $fill-hover;
  }

  &:not(&--fill, &--disabled):active {
    background: linear-gradient($fill-hover, $fill-hover), $border-color;
  }

  @media (hover: hover) {
    &:hover {
      background-color: $fill-hover;
    }

    &:not(&--fill, &--disabled):hover {
      background: linear-gradient($fill-hover, $fill-hover), $border-color;
    }
  }

  &--disabled {
    background-color: var(
      --wds-color-fill-standard-secondary-disabled,
      var(--wds-color-black-100-transparent-10, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1)))
    );
  }

  > svg {
    color: var(--wds-fill-button-icon-color, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  &__proportion {
    min-width: var(--wds-swatches-swatch-size-tiny, 22px);
  }
}