/**
 * Base Styles
 *
 * Block container, label, and shared controls wrapper styles.
 *
 * @package Text_Resizer
 */

// Block container
.wp-block-readease-text-resizer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-resizer-gap);
	align-items: center;

	// Label position: side (default) - row layout
	&--label-side {
		flex-direction: row;
	}

	// Label position: top - column layout
	&--label-top {
		flex-direction: column;
		align-items: flex-start;
	}

	// Mobile-only variant
	&--mobile-only {
		@media (min-width: 782px) {
			display: none;
		}
	}
}

// Label
.wp-block-readease-text-resizer__label {
	font-weight: 500;
	font-size: 0.75em;

	// Visually hidden but accessible to screen readers
	&--hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

// Controls container (shared)
.wp-block-readease-text-resizer__controls {
	display: flex;
	align-items: center;
	gap: var(--text-resizer-controls-gap);
}