/* Coloris Color Picker Custom Styles */

/* Input field styling */
.coloris-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 20px;
    transition: border-color 0.2s ease-in-out;
}

    .coloris-input:hover {
        border-color: var(--neutral-stroke-hover, #c7c7c7);
    }

    .coloris-input:focus {
        outline: none;
        border-color: var(--accent-fill-rest, #0078d4);
        box-shadow: 0 0 0 2px var(--focus-stroke-outer, rgba(0, 120, 212, 0.3));
    }

/* Minimal Styling */
.coloris-minimal .clr-field button {
    display: none !important;
}

.coloris-minimal .clr-field input {
    color: transparent !important;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .coloris-input {
        background-color: var(--neutral-fill-input-rest, #1e1e1e);
        color: var(--neutral-foreground-rest, #ffffff);
        border-color: var(--neutral-stroke-rest, #3d3d3d);
    }

        .coloris-input:hover {
            border-color: var(--neutral-stroke-hover, #4d4d4d);
        }

        .coloris-input:focus {
            border-color: var(--accent-fill-rest, #0078d4);
        }    
}

/* Coloris picker customization */
.clr-picker {
    font-family: var(--body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
    /* Optional: Custom theme integration */
    .clr-picker.clr-default .clr-swatches button,
    .clr-picker.clr-large .clr-swatches button,
    .clr-picker.clr-polaroid .clr-swatches button,
    .clr-picker.clr-pill .clr-swatches button {
        transition: transform 0.15s ease-in-out;
    }

        .clr-picker.clr-default .clr-swatches button:hover,
        .clr-picker.clr-large .clr-swatches button:hover,
        .clr-picker.clr-polaroid .clr-swatches button:hover,
        .clr-picker.clr-pill .clr-swatches button:hover {
            transform: scale(1.1);
        }