/**
 * Dropdown Control Style
 *
 * Select menu with percentage options.
 *
 * @package Text_Resizer
 */

.wp-block-readease-text-resizer__controls--dropdown {
	gap: 0;
}

.wp-block-readease-text-resizer__select {
	min-width: 95px;
	min-height: var(--text-resizer-min-height);
	padding: 0.5em 0.75em;
	border: var(--text-resizer-border-width) solid var(--text-resizer-border-color);
	border-radius: var(--text-resizer-border-radius);
	background-color: var(--text-resizer-button-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.937 10.825 4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75em center;
	background-size: 10px;
	color: inherit;
	font-family: inherit;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--text-resizer-transition-duration) ease;

	// Hover state
	&:hover {
		background-color: var(--text-resizer-button-bg-hover);
	}

	// Focus state
	&:focus {
		outline: 2px solid var(--text-resizer-focus-color);
		outline-offset: 2px;
	}

	// Option styling (limited browser support)
	option {
		background-color: #fff;
		color: #000;
	}
}