/* Custom styles for toggles and animations */

/* Toggle Checkbox */
.toggle-checkbox:checked {
  right: 0;
  border-color: #0ea5e9; /* primary-500 */
}
.toggle-checkbox:checked + .toggle-label {
  background-color: #0ea5e9; /* primary-500 */
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Range Input Customization */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #0ea5e9;
  cursor: pointer;
  margin-top: -4px;
}

input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border: none;
  border-radius: 50%;
  background: #0ea5e9;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #0ea5e9;
  cursor: pointer;
}

/* Color Picker Reset */
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
    border-radius: 0.375rem; /* rounded-md */
}