$border-radius: var(
  --wds-swatches-swatch-border-radius-medium,
  var(--wds-border-radius-full)
);
$tertiary-fill: var(--wds-color-fill-standard-tertiary, rgba(255, 255, 255, 1));

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

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

  &--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-900));
    min-width: var(--wds-swatches-swatch-size-medium, var(--wds-space-900));
  }

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

  &__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, var(--wds-border-radius-full));
    box-shadow: 0 0 0 1px
      var(--wds-swatches-fill-border-selected, var(--wds-color-border-dark-primary-active));
  }

  &__button#{&}__button#{&}__button--selected[aria-disabled='true']::before {
    box-shadow: 0 0 0 1px
      var(--wds-swatches-fill-border-disabled, var(--wds-color-black-100-transparent-5));
  }

  &__button--empty {
    border-color: var(--wds-swatches-fill-border-no-value, var(--wds-color-border-dark-secondary));

    background: linear-gradient(
      to top left,
      #{$tertiary-fill} 0%,
      #{$tertiary-fill} calc(50% - 0.8px),
      var(--wds-swatches-fill-border-no-value-dash, var(--wds-color-border-destructive-primary)) 50%,
      #{$tertiary-fill} calc(50% + 0.8px),
      #{$tertiary-fill} 100%
    );
  }

  @media (hover: hover) {
    &__button--empty:hover {
      /*
      * mirrors the base `:hover` rule for the same (button, border-color) pair.
      * This theme sheet loads after the base bundle, so a bare `--empty`
      * override here would tie `:hover`'s specificity and win the tie by being
      * later — re-declaring `:hover` too replays the base cascade so it still
      * outranks `--empty`, as it does in the unthemed default.
      */
      /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
      border-color: var(
        --wds-color-border-transparent-primary-hover,
        color-mix(in srgb, var(--wsr-color-B00, #084EBD) 60%, transparent)
      );
    }
  }

  &__button--empty[aria-disabled='true'] {
    /* mirrors the base `[aria-disabled='true']` rule for the same pair */
    border: none;
  }

  &__button[aria-disabled='true'] {
    background-color: var(--wds-swatches-fill-disabled, var(--wds-color-fill-dark-secondary));
  }

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

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