/**
 * GSL Swatches — Structural frontend styles.
 *
 * Minimal layout and state styles. Visual customisation (colours, sizes,
 * active ring) should be handled by the theme via Tailwind utilities or
 * by overriding CSS custom properties.
 */

:root {
  --gsl-swatch-size: 48px;
  --gsl-swatch-gap: 0.5rem;
  --gsl-swatch-radius: 0.375rem;
  --gsl-swatch-border: 2px solid transparent;
  --gsl-swatch-border-active: 2px solid currentColor;
  --gsl-swatch-opacity-disabled: 0.35;
}

/* Group layout */
.gsl-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-swatch-gap);
  align-items: flex-start;
}

/* Individual swatch button */
.gsl-swatch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: var(--gsl-swatch-border);
  border-radius: var(--gsl-swatch-radius);
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.gsl-swatch--beside {
  flex-direction: row;
}

.gsl-swatch--overlay {
  overflow: hidden;
}

/* Active state */
.gsl-swatch--active {
  border: var(--gsl-swatch-border-active);
}

/* Hover state */
.gsl-swatch:hover:not(.gsl-swatch--disabled) {
  border-color: currentColor;
  opacity: 0.85;
}

/* Disabled / unavailable */
.gsl-swatch--disabled {
  opacity: var(--gsl-swatch-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Swatch image */
.gsl-swatch__img {
  width: var(--gsl-swatch-size);
  height: var(--gsl-swatch-size);
  object-fit: cover;
  border-radius: calc(var(--gsl-swatch-radius) - 2px);
  display: block;
}

.gsl-swatch__colour {
  display: block;
  width: var(--gsl-swatch-size);
  height: var(--gsl-swatch-size);
  border-radius: calc(var(--gsl-swatch-radius) - 2px);
  background: var(--gsl-swatch-colour, transparent);
}

/* Fallback text (when no image) */
.gsl-swatch__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gsl-swatch-size);
  height: var(--gsl-swatch-size);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  background: #f3f4f6;
  border-radius: calc(var(--gsl-swatch-radius) - 2px);
}

/* Label */
.gsl-swatch__label {
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  max-width: calc(var(--gsl-swatch-size) + 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsl-swatch--overlay .gsl-swatch__label {
  position: absolute;
  inset-inline: 0.25rem;
  bottom: 0.25rem;
  max-width: none;
  padding: 0.125rem 0.25rem;
  color: #fff;
  background: rgb(0 0 0 / 0.55);
  border-radius: calc(var(--gsl-swatch-radius) - 3px);
}

/* Archive variant — smaller swatches */
.gsl-swatches--archive .gsl-swatch__img {
  width: 32px;
  height: 32px;
}

.gsl-swatches--archive .gsl-swatch__colour {
  width: 32px;
  height: 32px;
}

.gsl-swatches--archive .gsl-swatch {
  padding: 0.125rem;
}

/* Overflow indicator */
.gsl-swatches__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  border-radius: var(--gsl-swatch-radius);
  background: #f3f4f6;
}

/* Focus ring */
.gsl-swatch:focus-visible {
  outline: 2px solid Highlight;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: 2px;
}

/* Hidden select wrapper (screen-reader accessible but visually hidden) */
.gsl-swatches-select-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}