.saturation-overlay-white {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.saturation-overlay-black {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.hue-gradient {
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Bootstrap overrides/Custom utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-crosshair {
    cursor: crosshair;
}

.max-w-sm {
    max-width: 24rem;
}

.h-40 {
    height: 10rem;
}

.h-3 {
    height: 0.75rem;
}

.custom-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
    outline: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Variables for preview */