/**
 * Video Controls Styles
 *
 * Styles for accessible play/pause buttons on HTML5 video elements
 * in cover blocks.
 */

/* Video controls container */
.video-controls {
	bottom: var(--s-small);
	display: flex;
	gap: var(--s-xsmall);
	pointer-events: none; /* Allow clicks to pass through to video */
	position: absolute;
	right: var(--s-small);
	z-index: var(--z-high);
}

/* Individual control buttons */
.video-control-button {
	align-items: center;
	background-color: rgb(0 0 0 / 80%);
	border: 2px solid rgb(255 255 255 / 30%);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(255 255 255 / 40%);
	color: var(--c-white);
	cursor: pointer;
	display: flex;
	font-size: var(--zero); /* Hide any text content */
	height: var(--sp-48);
	justify-content: center;
	outline: none;
	padding: var(--zero);
	pointer-events: auto; /* Re-enable pointer events for buttons */
	transition: all var(--t-fast) ease;
	width: var(--sp-48);

	&:hover {
		background-color: rgb(0 0 0 / 90%);
		border-color: rgb(255 255 255 / 60%);
		transform: scale(1.05);
	}

	&:focus-visible {
		border-color: var(--c-blue);
		box-shadow: 0 0 0 2px rgb(0 123 186 / 40%);
	}

	&:active {
		background-color: var(--c-black);
		transform: scale(0.95);
	}

	/* Icon styles */
	svg {
		flex-shrink: 0;
		height: var(--sp-20);
		width: var(--sp-20);
	}
}

/* Specific play/pause button styling */
.video-play-pause {
	min-height: var(--sp-48);
	min-width: var(--sp-48);
}

/* Ensure video containers maintain relative positioning */
.wp-block-cover:has(video) {
	position: relative;
}

/* Hide default video controls if they exist */
.wp-block-cover video::-webkit-media-controls-panel {
	display: none !important;
}

.wp-block-cover video::-webkit-media-controls {
	display: none !important;
}

/* Responsive adjustments */

@media (--bp-small-max) {
	.video-controls {
		bottom: var(--s-ssmall);
		right: var(--s-ssmall);
	}

	.video-control-button {
		height: var(--sp-40);
		min-height: var(--sp-40);
		min-width: var(--sp-40);
		width: var(--sp-40);

		svg {
			height: var(--sp-16);
			width: var(--sp-16);
		}
	}
}

/* High contrast mode support */

@media (prefers-contrast: high) {
	.video-control-button {
		border-color: var(--c-white);
		border-width: 3px;

		&:hover {
			background-color: var(--c-white);
			border-color: var(--c-white);
			color: var(--c-black);
		}

		&:focus-visible {
			border-color: var(--c-white);
			box-shadow: 0 0 0 3px var(--c-black);
		}
	}
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
	.video-control-button {
		transition: none;

		&:hover {
			transform: none;
		}

		&:active {
			transform: none;
		}
	}
}

/* Print styles - hide video controls when printing */

@media print {
	.video-controls {
		display: none !important;
	}
}