/**
 * Play Button Component
 *
 * Circular play button with CSS triangle icon.
 * Used with [data-video-trigger] for video modal triggers.
 *
 * Usage:
 *   <button class="play-button" data-video-trigger data-video-id="abc123">
 *     <span class="play-button__icon" aria-hidden="true"></span>
 *     <span class="screen-reader-text">Play video</span>
 *   </button>
 *
 * @package Condor
 */

/* ==========================================================================
   Base Play Button
   ========================================================================== */

.play-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4em;
	height: 4em;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: all 0.3s ease-in-out;

	&:hover {
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
	}

	&:focus {
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: 4px;
	}
}

/* ==========================================================================
   Play Icon (CSS Triangle)
   ========================================================================== */

.play-button__icon {
	position: relative;
	display: block;
	width: 0;
	height: 0;
	margin-left: 0.25em; /* Optical centering - triangle appears left-heavy */
	border-style: solid;
	border-width: 0.65em 0 0.65em 1.1em;
	border-color: transparent transparent transparent var(--wp--preset--color--white);
	transition: border-color 0.2s ease-in-out;
}

.play-button:hover .play-button__icon {
	border-left-color: var(--wp--preset--color--bright-red);
}

/* ==========================================================================
   Discover Play Button Variant
   Large button with concentric circle hover effect
   ========================================================================== */

.play-button--discover {
	position: relative;
	width: 5rem;
	height: 5rem;
	border: none;
	background: rgba(255, 255, 255, 0.4);
	box-shadow: none;
	z-index: 11;

	/* Outer concentric circle */
	&::before {
		content: '';
		position: absolute;
		inset: -0.5rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
		z-index: -1;
		transition: all 0.4s ease-in-out;
	}

	/* Inner concentric circle (the button itself is the middle circle) */
	&::after {
		content: '';
		position: absolute;
		inset: 0.25rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.5);
		z-index: -1;
		transition: all 0.4s ease-in-out;
		opacity: 0;
	}

	&:hover {
		background: rgba(255, 255, 255, 0.75);

		&::before {
			background: rgba(255, 255, 255, 0.5);
			box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
		}

		&::after {
			opacity: 1;
		}
	}

	/* Larger icon for discover variant */
	.play-button__icon {
		border-width: 0.75em 0 0.75em 1.25em;
		border-left-color: var(--wp--preset--color--white);
	}

	&:hover .play-button__icon {
		border-left-color: var(--wp--preset--color--light-blue);
	}
}

/* ==========================================================================
   Size Modifiers
   ========================================================================== */

.play-button--small {
	width: 3em;
	height: 3em;
	border-width: 2px;

	.play-button__icon {
		border-width: 0.5em 0 0.5em 0.85em;
		margin-left: 0.2em;
	}
}

.play-button--large {
	width: 6em;
	height: 6em;
	border-width: 4px;

	.play-button__icon {
		border-width: 0.9em 0 0.9em 1.5em;
		margin-left: 0.35em;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}