/**
 * 3Syxty Studio — Colour Picker Component
 *
 * HSL/RGB/HEX colour picker with preset swatches, opacity slider,
 * eyedropper integration, and auto-contrast checking.
 */

/* -----------------------------------------------------------------------
   Picker Container
   ----------------------------------------------------------------------- */

.colour-picker {
    width: 260px;
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-heavy);
    overflow: hidden;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.colour-picker-inline {
    box-shadow: none;
    border: none;
    padding: 0;
}

/* -----------------------------------------------------------------------
   Saturation / Brightness Area
   ----------------------------------------------------------------------- */

.colour-picker-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    cursor: crosshair;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.colour-picker-area-gradient-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #FFFFFF, transparent);
}

.colour-picker-area-gradient-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #000000);
}

.colour-picker-area-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* -----------------------------------------------------------------------
   Sliders
   ----------------------------------------------------------------------- */

.colour-picker-sliders {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.colour-picker-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Checkerboard pattern for transparency */
.colour-picker-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.colour-picker-preview-swatch {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.colour-picker-slider-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.colour-picker-slider {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.colour-picker-hue-slider {
    background: linear-gradient(to right,
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
}

.colour-picker-alpha-slider {
    position: relative;
    overflow: hidden;
}

.colour-picker-alpha-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.colour-picker-alpha-slider-gradient {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.colour-picker-slider-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* -----------------------------------------------------------------------
   Inputs (HEX / RGB / HSL)
   ----------------------------------------------------------------------- */

.colour-picker-inputs {
    display: flex;
    gap: var(--space-1-5);
    align-items: flex-end;
}

.colour-picker-input-group {
    flex: 1;
    min-width: 0;
}

.colour-picker-input-label {
    font: var(--type-overline);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
    display: block;
    text-align: center;
}

.colour-picker-input {
    width: 100%;
    height: 28px;
    padding: 0 var(--space-1-5);
    font: var(--type-mono);
    font-size: 11px;
    text-align: center;
    color: var(--text-primary);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--motion-instant);
}

.colour-picker-input:focus {
    border-color: var(--input-border-focus);
}

.colour-picker-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: none;
    border: 1px solid var(--input-border);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--motion-instant), color var(--motion-instant);
}

.colour-picker-mode-toggle:hover {
    background-color: var(--accent-primary-subtle);
    color: var(--text-primary);
}

.colour-picker-mode-toggle svg {
    width: 14px;
    height: 14px;
}

/* -----------------------------------------------------------------------
   Eyedropper
   ----------------------------------------------------------------------- */

.colour-picker-eyedropper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-2);
    font: var(--type-caption);
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-instant);
}

.colour-picker-eyedropper:hover {
    color: var(--text-primary);
    border-color: var(--border-default);
    background-color: var(--accent-primary-subtle);
}

.colour-picker-eyedropper svg {
    width: 14px;
    height: 14px;
}

/* -----------------------------------------------------------------------
   Swatches
   ----------------------------------------------------------------------- */

.colour-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.colour-picker-swatch {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    transition: transform var(--motion-instant), box-shadow var(--motion-instant);
    position: relative;
}

.colour-picker-swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-medium);
    z-index: 1;
}

.colour-picker-swatch[data-active="true"] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.colour-picker-swatch-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-tertiary);
    color: var(--text-muted);
    border-style: dashed;
}

.colour-picker-swatch-add svg {
    width: 12px;
    height: 12px;
}

/* -----------------------------------------------------------------------
   Contrast Checker
   ----------------------------------------------------------------------- */

.colour-picker-contrast {
    padding: var(--space-2);
    background-color: var(--surface-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.colour-picker-contrast-sample {
    width: 48px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--type-body);
    font-weight: 700;
    flex-shrink: 0;
}

.colour-picker-contrast-info {
    flex: 1;
    min-width: 0;
}

.colour-picker-contrast-ratio {
    font: var(--type-body-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.colour-picker-contrast-level {
    font: var(--type-caption);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: 2px;
}

.colour-picker-contrast-pass {
    color: var(--success-text);
}

.colour-picker-contrast-fail {
    color: var(--error-text);
}