/**
 * Slider Control Style
 *
 * Range input with min/max labels.
 *
 * @package Text_Resizer
 */

.wp-block-readease-text-resizer__controls--slider {
	gap: 0.5em;
}

.wp-block-readease-text-resizer__slider {
	width: var(--text-resizer-slider-width);
	height: var(--text-resizer-slider-height);
	margin: 0;
	padding: 0;
	border-radius: var(--text-resizer-border-radius);
	background: var(--text-resizer-track-bg);
	appearance: none;
	cursor: pointer;
	border: 1px solid var(--text-resizer-track-border);

	// Webkit track
	&::-webkit-slider-runnable-track {
		height: var(--text-resizer-slider-height);
		border-radius: var(--text-resizer-border-radius);
		background: var(--text-resizer-track-bg);
	}

	// Webkit thumb
	&::-webkit-slider-thumb {
		width: var(--text-resizer-thumb-size);
		height: var(--text-resizer-thumb-size);
		margin-top: calc((var(--text-resizer-slider-height) - var(--text-resizer-thumb-size)) / 2);
		border: var(--text-resizer-thumb-border-width) solid var(--text-resizer-thumb-border-color);
		border-radius: 50%;
		background: var(--text-resizer-thumb-bg);
		appearance: none;
		cursor: pointer;
		transition: transform var(--text-resizer-transition-duration) ease;
	}

	// Firefox track
	&::-moz-range-track {
		height: var(--text-resizer-slider-height);
		border-radius: var(--text-resizer-border-radius);
		background: var(--text-resizer-track-bg);
	}

	// Firefox thumb
	&::-moz-range-thumb {
		width: var(--text-resizer-thumb-size);
		height: var(--text-resizer-thumb-size);
		border: var(--text-resizer-thumb-border-width) solid var(--text-resizer-thumb-border-color);
		border-radius: 50%;
		background: var(--text-resizer-thumb-bg);
		cursor: pointer;
		transition: transform var(--text-resizer-transition-duration) ease;
	}

	// Focus state
	&:focus {
		outline: none;
	}

	&:focus::-webkit-slider-thumb {
		outline: 2px solid var(--text-resizer-focus-color);
		outline-offset: 2px;
	}

	&:focus::-moz-range-thumb {
		outline: 2px solid var(--text-resizer-focus-color);
		outline-offset: 2px;
	}

	// Hover state
	&:hover::-webkit-slider-thumb {
		transform: scale(1.1);
	}

	&:hover::-moz-range-thumb {
		transform: scale(1.1);
	}
}

// Slider labels (min/max "A" indicators)
.wp-block-readease-text-resizer__slider-label {
	font-weight: 500;
	line-height: 1;

	&--min {
		font-size: 0.75em;
	}

	&--max {
		font-size: 1.25em;
	}
}