.fill-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--wds-swatches-swatch-border-radius-medium, var(--wds-border-radius-300, 6px));
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  padding: 0;
  cursor: pointer;
  --fill-button-background-color: var(
    --wds-fill-button-fill,
    var(--wds-color-fill-standard-secondary, var(--wsr-color-B50, #e7f0ff))
  );
  background-color: var(--fill-button-background-color);

  &:not(&--fill, &--disabled) {
    border: var(--wds-fill-button-border-width, var(--wds-border-width-none, 0px)) solid transparent;
    background:
      linear-gradient(
        var(--fill-button-background-color),
        var(--fill-button-background-color)
      ),
      var(
        --wds-fill-button-border-color,
        var(--wds-color-border-standard-secondary, linear-gradient(to right, transparent, transparent))
      );
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  &--fill {
    border: solid 1px
      var(--wds-color-border-transparent-primary, rgba(8, 78, 189, 0.48));
  }

  &:active {
    --fill-button-background-color: var(
      --wds-fill-button-fill-hover,
      var(--wds-color-fill-standard-secondary-hover, var(--wsr-color-B40, #d6e6fe))
    );
  }

  @media (hover: hover) {
    &:hover {
      --fill-button-background-color: var(
        --wds-fill-button-fill-hover,
        var(--wds-color-fill-standard-secondary-hover, var(--wsr-color-B40, #d6e6fe))
      );
    }
  }

  &--disabled {
    cursor: default;
    --fill-button-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)))
    );

    /* Repeated disabled class keeps the disabled icon color above FillButton's base icon rule. */
    &#{&} > svg {
      color: var(
        --wds-color-text-disabled,
        var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
      );
    }
  }

  > svg {
    color: var(--wds-fill-button-icon-color, var(--wds-color-text-primary, var(--wsr-color-B10, #116dff)));
  }

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