$size-small: var(
  --wds-close-button-standard-filled-size-small,
  var(--wds-space-475, 18px)
);
$size-medium: var(
  --wds-close-button-standard-filled-size-medium,
  var(--wds-space-600, 24px)
);
$size-large: var(
  --wds-close-button-standard-filled-size-large,
  var(--wds-space-750, 30px)
);
$standard-filled-text: var(
  --wds-close-button-standard-filled-text,
  var(--wds-color-text-standard-primary, var(--wsr-color-B10, #116dff))
);

.close-button {
  width: $size-small;
  height: $size-small;

  &--skin-standard-filled {
    background-color: var(
      --wds-close-button-standard-filled-fill,
      var(--wds-color-fill-dark-secondary, var(--wsr-color-B50, #e7f0ff))
    );
    color: $standard-filled-text;
  }

  @media (hover: hover) {
    &--skin-standard-filled:hover:where(:not(&--disabled)) {
      background-color: var(
        --wds-close-button-standard-fill-hover,
        var(
          --wds-color-fill-dark-secondary-hover,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
      color: var(
        --wds-close-button-standard-filled-text-hover,
        var(--wds-color-text-standard-primary, var(--wsr-color-B10, #116dff))
      );
    }
  }

  &--skin-standard-filled:active:where(:not(&--disabled)) {
    background-color: var(
      --wds-close-button-standard-fill-active,
      var(--wds-color-fill-dark-tertiary-active, var(--wsr-color-B30, #a8caff))
    );
    color: $standard-filled-text;
  }

  &--skin-standard-filled#{&}--disabled {
    background-color: var(
      --wds-close-button-standard-fill-disabled,
      var(
        --wds-color-fill-dark-secondary-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
    color: var(
      --wds-close-button-standard-filled-text-disabled,
      var(--wds-color-text-disabled, var(--wsr-color-D80, #ffffff))
    );
  }

  &--size-medium {
    width: $size-medium;
    height: $size-medium;
  }

  &--size-large {
    width: $size-large;
    height: $size-large;
  }
}