$border-radius: var(
  --wds-swatches-swatch-border-radius-medium,
  var(--wds-border-radius-200)
);

.fill-preview {
  &--size-extra-tiny {
    min-height: var(--wds-swatches-swatch-size-extra-tiny, var(--wds-space-475));
    min-width: var(--wds-swatches-swatch-size-extra-tiny, var(--wds-space-475));
  }

  &--size-tiny {
    min-height: var(--wds-swatches-swatch-size-tiny, var(--wds-space-600));
    min-width: var(--wds-swatches-swatch-size-tiny, var(--wds-space-600));
  }

  &--size-small {
    min-height: var(--wds-swatches-swatch-size-small, var(--wds-space-700));
    min-width: var(--wds-swatches-swatch-size-small, var(--wds-space-700));
  }

  &--size-medium {
    min-height: var(--wds-swatches-swatch-size-medium, var(--wds-space-800));
    min-width: var(--wds-swatches-swatch-size-medium, var(--wds-space-800));
  }

  &--size-large {
    min-height: var(--wds-swatches-swatch-size-large, var(--wds-space-900));
    min-width: var(--wds-swatches-swatch-size-large, var(--wds-space-900));
  }

  &__button {
    border-radius: #{$border-radius};
  }

  &__content::after {
    border-radius: #{$border-radius};
  }

  &__button#{&}__button#{&}__button--selected::before {
    border-radius: var(--wds-swatches-swatch-active-border-radius-medium, 7px);
  }

  &__color-backdrop {
    border-radius: #{$border-radius};
  }

  &__image-backdrop {
    border-radius: #{$border-radius};
  }
}