/**
 * Editor-specific styles for Serend Animations
 * 
 * @package Serend_Animations
 * @since   1.0.3
 */

/* Custom black color for Toggle Switch */
.serend-toggle-wrapper .components-form-toggle.is-checked .components-form-toggle__track {
	background-color: #000 !important;
}

.serend-toggle-wrapper .components-form-toggle.is-checked:hover .components-form-toggle__track {
	background-color: #000 !important;
}

.serend-toggle-wrapper .components-form-toggle.is-checked .components-form-toggle__thumb {
	background-color: #fff !important;
}

.serend-toggle-wrapper .components-form-toggle:focus .components-form-toggle__track {
	box-shadow: 0 0 0 2px #000 !important;
}

/* Remove blue focus outline from toggle */
.serend-toggle-wrapper .components-form-toggle__input:focus + .components-form-toggle__track {
	box-shadow: 0 0 0 2px #000 !important;
}

/* Custom styling for direction buttons */
.serend-direction-button.components-button.is-secondary {
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	outline: 1px solid transparent !important;
}

.serend-direction-button.components-button.is-secondary:hover,
.serend-direction-button.components-button.is-secondary:focus {
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	background-color: #f0f0f0 !important;
}

.serend-direction-button.components-button.is-secondary:active {
	box-shadow: inset 0 0 0 1px #000 !important;
}

.serend-direction-button.components-button.is-primary {
	background-color: #000 !important;
	border-color: #000 !important;
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #fff !important;
}

.serend-direction-button.components-button.is-primary:hover,
.serend-direction-button.components-button.is-primary:focus {
	background-color: #000 !important;
	border-color: #000 !important;
}

.serend-direction-button svg {
	color: currentColor !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* Custom styling for Delay Range Slider */
.serend-delay-control.components-range-control {
	color: #000 !important;
}

.serend-delay-control .components-range-control__wrapper {
	color: #000 !important;
}

.serend-delay-control .components-range-control__track {
	background: #000 !important;
}

.serend-delay-control .components-range-control__thumb-wrapper {
	background-color: #000 !important;
}

.serend-delay-control .components-range-control__thumb-wrapper span{
	background-color: #000 !important;
}

.serend-delay-control .components-range-control__slider::-webkit-slider-thumb {
	background-color: #000 !important;
	border-color: #000 !important;
}

.serend-delay-control .components-range-control__slider::-moz-range-thumb {
	background-color: #000 !important;
	border-color: #000 !important;
}

.serend-delay-control .components-range-control__slider::-webkit-slider-runnable-track {
	background: linear-gradient(to right, #000 var(--range-ratio, 0%), #ddd var(--range-ratio, 0%)) !important;
}

.serend-delay-control .components-range-control__slider::-moz-range-track {
	background-color: #ddd !important;
}

.serend-delay-control .components-range-control__slider::-moz-range-progress {
	background-color: #000 !important;
}

/* Custom styling for Preview Button */
.serend-preview-button.components-button.is-secondary {
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	outline: 1px solid transparent !important;
}

.serend-preview-button.components-button.is-secondary:hover,
.serend-preview-button.components-button.is-secondary:focus {
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	background-color: #f0f0f0 !important;
}

.serend-preview-button.components-button.is-secondary:disabled {
	box-shadow: inset 0 0 0 1px #999 !important;
	color: #999 !important;
	opacity: 0.6;
}