/* Custom Dark Scrollbar */
.custom-scrollbar::-webkit-scrollbar, 
textarea::-webkit-scrollbar, 
input::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track, 
textarea::-webkit-scrollbar-track, 
input::-webkit-scrollbar-track {
	background: #0f172a; /* slate-950 */
	border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb, 
textarea::-webkit-scrollbar-thumb, 
input::-webkit-scrollbar-thumb {
	background: #334155; /* slate-700 */
	border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover, 
textarea::-webkit-scrollbar-thumb:hover, 
input::-webkit-scrollbar-thumb:hover {
	background: #475569; /* slate-600 */
}

/* Checkered background for the preview area (shows alpha transparency) */
.bg-checkered {
	background-color: #0f172a;
	background-image: 
		linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%, #1e293b),
		linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%, #1e293b);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

/* Beautiful Native Color Picker Restyling */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid #334155;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
input[type="color"]:hover {
	transform: scale(1.05);
	border-color: #3b82f6;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Custom Range Slider for Alpha */
.tw-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%; 
    background: #3b82f6; /* blue-500 */
    cursor: pointer;
	box-shadow: 0 0 0 3px #0f172a, 0 0 0 4px #3b82f6;
	transition: transform 0.1s ease;
}
.tw-range::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}
.tw-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
	border: 3px solid #0f172a;
	box-shadow: 0 0 0 1px #3b82f6;
}