$fp-button: '.fill-preview__button';
$fp-color-backdrop: '.fill-preview__color-backdrop';
$fp-image-backdrop: '.fill-preview__image-backdrop';

$button-content: '.button-core__content';

.palette {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;

  /*
   * Doubled: `min-width` / `min-height` tie with `fill-preview`'s root at (0,1,0)
   * and only won because the Stylable bundle emitted Palette later. Order between
   * two migrated sheets is not guaranteed.
   */
  &__fill-preview#{&}__fill-preview {
    border-radius: 0px !important;
    min-width: 0;
    min-height: 0;
  }

  /* Resets multi-color FillPreview styling */
  @layer wds.composition {
    &__fill-preview #{$fp-button},
    &__fill-preview #{$fp-button} #{$button-content}::after {
      border: none;
      border-width: unset;
      border-radius: 0px;
    }

    &__fill-preview #{$fp-button} #{$button-content} {
      width: 100%;
      height: 100%;
    }

    &__fill-preview #{$fp-color-backdrop},
    &__fill-preview #{$fp-image-backdrop} {
      border: none;
      border-width: 0px;
      border-radius: 0px;
      background-image: none;
    }
  }
}