/**
 * Coloris Color Picker - Story Signal Theme Overrides
 *
 * Customizes the Coloris color picker to match the Story Signal design system.
 * Uses CSS variables from the main stylesheet for consistency.
 */

/* Coloris popup container */
.clr-picker {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

/* Polaroid theme adjustments */
.clr-picker.clr-polaroid {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
}

/* Color gradient area */
.clr-picker .clr-gradient {
  border-radius: var(--radius-md);
}

/* Hue slider */
.clr-picker .clr-hue {
  border-radius: var(--radius-full);
}

/* Preview color swatch */
.clr-picker .clr-preview {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* Text input for hex value */
.clr-picker .clr-field input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.clr-picker .clr-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Swatch buttons */
.clr-picker .clr-swatches button {
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.clr-picker .clr-swatches button:hover {
  transform: scale(1.15);
}

.clr-picker .clr-swatches button:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Selected swatch */
.clr-picker .clr-swatches button.clr-active {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-bg-surface);
}

/* Input wrapper for coloris-enabled inputs */
.clr-field {
  display: flex;
  align-items: center;
}

/* Color preview button next to input */
.clr-field button {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-right: var(--space-2);
}

/* Ensure coloris inputs display correctly */
.coloris-input {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Modal z-index fix: ensure Coloris appears above modals */
.clr-picker {
  z-index: 10000;
}

/* Marker/handle styles */
.clr-picker .clr-marker {
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Slider handle */
.clr-picker .clr-hue .clr-hue-marker,
.clr-picker .clr-alpha .clr-alpha-marker {
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}