.sp-hidden,
.sp-initial,
.sp-palette-button-container,
.sp-alpha,
.sp-fill {
  @apply !hidden;
}

.sp-replacer {
  @apply box-border flex h-9 w-[12.5rem] cursor-pointer select-none justify-between gap-4 rounded-lg border border-gray-300 bg-white px-[0.9375rem] py-[0.4375rem];

  &.sp-active,
  &:hover,
  &:focus {
    @apply border-none bg-gray-100 px-4 py-2;
  }

  .SearchWidget-filter & {
    @apply w-full;
  }
}

.sp-preview {
  @apply relative flex select-none gap-2 overflow-hidden text-ellipsis whitespace-nowrap;

  &::after {
    @apply overflow-hidden text-ellipsis whitespace-nowrap pl-[1.875rem] text-sm text-gray-500 [&:where([data-placeholder])]:[content:attr(data-placeholder)] [&[data-color]]:text-gray-900 [&[data-color]]:[content:attr(data-color)];
  }
}

.sp-preview-inner {
  @apply absolute bottom-0 left-0 right-0 top-0 blokk h-5 w-5 rounded-full;
}

.sp-preview:not([data-placeholder^='#']) {
  .sp-preview-inner.sp-clear-display {
    @apply border border-dashed border-gray-300 !bg-white;
  }
}

.sp-dd {
  @apply relative h-5 w-5 overflow-hidden before:btu-icon before:btu-icon-chevron-down before:btu-icon-md;

  .sp-active & {
    @apply before:btu-icon-chevron-up;
  }
}

.sp-container {
  @apply z-[100001] grid max-w-[11.625rem] grid-cols-[auto_auto] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg;
}

.sp-container[popover] {
  @apply inset-[unset];
}

.sp-picker-container {
  @apply col-start-1 col-end-3 row-start-1 row-end-5 grid [grid:subgrid/subgrid];
}

.sp-top,
.sp-top-inner {
  @apply contents;
}

.sp-color {
  @apply relative col-start-1 col-end-2 row-start-1 row-end-2 ml-4 mt-4 h-[7.75rem] w-[7.75rem];
}

.sp-sat {
  @apply h-full w-full bg-[linear-gradient(to_right,#fff,rgb(204_154_129_/_0%))];
}

.sp-val {
  @apply h-full w-full bg-[linear-gradient(to_top,#000,rgb(204_154_129_/_0%))];
}

.sp-dragger {
  @apply absolute h-[0.625rem] w-[0.625rem] cursor-pointer select-none rounded-full border-2 border-white bg-transparent outline outline-gray-900;
}

.sp-hue {
  @apply relative col-start-2 row-start-1 mr-4 mt-4 w-[1.25rem] justify-self-end bg-[linear-gradient(to_bottom,_#EB3323_0%,#FAF050_17%,#72FB4E_33%,#53BAF9_50%,#1017F5_67%,#EB36D9_83%,#EB333B_100%)];
}

.sp-slider {
  @apply absolute -left-[0.0625rem] -right-[0.0625rem] top-0 box-border h-[0.625rem] cursor-pointer select-none rounded-sm border-2 border-white bg-transparent outline outline-gray-700;
}

.sp-input-container {
  @apply col-start-1 col-end-3 row-start-2 mx-4 mb-4 mt-2;
}

.sp-container .sp-input {
  @apply box-border pe-[3.25rem];
}

.sp-clear {
  @apply z-[1] col-start-1 col-end-3 row-start-2 mr-8 mt-[1.0625rem] cursor-pointer select-none self-start justify-self-end before:btu-icon before:btu-icon-ban before:text-gray-700;
}

.sp-palette-container {
  @apply col-start-1 col-end-3 row-start-3 flex flex-wrap gap-2 border-t border-gray-200 p-4;
}

.sp-palette,
.sp-palette-row {
  @apply contents;
}

.sp-palette .sp-thumb-el {
  @apply relative h-6 w-6 cursor-pointer;

  &.sp-thumb-active {
    @apply after:btu-icon after:btu-icon-check before:absolute before:-bottom-1 before:-left-1 before:-right-1 before:-top-1 before:rounded-full before:border before:border-gray-300 before:bg-transparent after:absolute after:bottom-[0.125rem] after:left-[0.125rem] after:right-[0.125rem] after:top-[0.125rem] after:btu-icon-md [&:where(.sp-thumb-dark)]:after:text-white-light [&:where(.sp-thumb-light)]:after:text-black-light;
  }
}

.sp-palette .sp-thumb-inner {
  @apply blokk h-full w-full overflow-hidden rounded-full;
}

.sp-button-container {
  @apply col-start-1 col-end-3 row-start-4 flex items-center justify-end gap-3 border-t border-gray-200 bg-white px-4 py-3;
}

.sp-cancel {
  @apply btu-button btu-button-gray btu-button-md;
}

.sp-choose {
  @apply btu-button btu-button-primary btu-button-md;
}

/* Hide the row when the picker has no palette swatches. */
.sp-palette-container:has(
    .sp-palette.sp-thumb .sp-palette-row:empty + .sp-palette-row:empty
  ) {
  @apply hidden;
}
