/**
 * Las diapositivas de video de la galería y su miniatura en la tira.
 *
 * ⚠️ Oxygen encola su universal.css DESPUÉS de las hojas del plugin, así que
 * ante igual especificidad gana Oxygen. Si algo de acá no se ve, mirar primero
 * si hay una regla en el builder pisándolo: ya pasó con las flechas de la tira
 * en la 1.13.1.
 */

.woocommerce-product-gallery__image.is-video {
	position: relative;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.is-video__player,
.is-video__poster {
	display: block;
	width: 100%;
	height: auto;
}

/* La URL del mp4 vive acá hasta que alguien lo reproduce. No se dibuja. */
.is-video__src {
	display: none;
}

/* El botón de play, centrado sobre la portada. */
.is-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(24, 24, 27, 0.72);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.is-video__play:hover {
	background: rgba(24, 24, 27, 0.88);
}

/* El triángulo se dibuja con bordes, igual que el chevron de las flechas: así
   el tamaño y la forma no cambian con la tipografía del tema. */
.is-video__play::before {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}

/* Un mp4 que arranca solo no lleva botón: ya se está reproduciendo.
   [src] alcanza sin mirar [controls]: arrancar() solo pone src cuando el
   video está por reproducirse (auto o clic manual), así que su sola
   presencia ya significa "reproduciéndose". Antes la regla exigía además
   :not([controls]), y con el ajuste de controles en "visibles" el video
   arranca CON controls desde el vamos: la negación fallaba y el botón
   quedaba dibujado encima de un video que ya sonaba. */
.is-video--mp4 .is-video__player[src] + .is-video__play {
	display: none;
}

/**
 * El distintivo de la miniatura.
 *
 * FlexSlider arma la tira copiando el data-thumb de cada diapositiva a un <img>
 * nuevo, y NO copia las clases. Así que desde el CSS no hay forma de saber cuál
 * miniatura es de un video: el distintivo lo pone gallery.js, marcando el <li>
 * que corresponde. Ver la nota en ese archivo.
 */
.flex-control-thumbs li.is-video-thumb {
	position: relative;
}

/* El círculo va en ::before y el triángulo en ::after: sin eso el triángulo
   quedaría tapado, porque a igual posición y sin z-index el ::after de un
   elemento pinta después que su ::before. */
.flex-control-thumbs li.is-video-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(24, 24, 27, 0.72);
	pointer-events: none;
}

/* El triángulo interno, la única señal de que la miniatura es un video y no
   una foto. Mismo truco de bordes que .is-video__play::before, en chico:
   sin él el distintivo es un punto liso indistinguible de cualquier otra
   marca redonda. */
.flex-control-thumbs li.is-video-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #fff;
	margin-left: 2px;
	pointer-events: none;
}

/* Esconde la portada y el botón cuando se dibuja el iframe, sin ocupar lugar. */
.is-video__hidden {
	display: none;
}

.is-video__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}