/* Base color-swatch styles */
.color-swatch {
  @apply relative box-border size-8 shrink-0;

  /* Checkered background pattern for transparency */
  background:
    linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
    repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;

  /* Default border for visibility against similar backgrounds */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Shape variants */
.color-swatch--circle {
  @apply rounded-2xl;
}

.color-swatch--square {
  @apply rounded-md;
}

/* Size variants */
.color-swatch--xs {
  @apply size-4;

  &.color-swatch--circle {
    @apply rounded-lg;
  }
}

.color-swatch--sm {
  @apply size-6;

  &.color-swatch--circle {
    @apply rounded-xl;
  }
}

.color-swatch--md {
  /* No additional styles — default size (32px) uses circle's base rounded-2xl */
}

.color-swatch--lg {
  @apply size-9;

  &.color-swatch--circle {
    @apply rounded-3xl;
  }
}

.color-swatch--xl {
  @apply size-10;

  &.color-swatch--circle {
    @apply rounded-3xl;
  }
}