/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[0]!./components/_video/index.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
  * File scss:     mixins.scss
  * -----------------------------------------------------------
  * Description:   Mixin e funzioni CSS per dimensioni, centratura, 
  *                ombre, checkbox e conversione px/rem.
**/
/**
  * Funzione che converte un valore in pixel (px) a rem, 
  * utilizzando il contesto di base definito da $html-context.
  * 
  * @param $target: Valore in pixel da convertire in rem.
  * @param $context: (Opzionale) Il contesto base in cui fare la conversione (default 16px).
  * @return: Il valore convertito in rem.
**/
/**
  * Mixin per impostare sia la larghezza che l'altezza di un elemento.
  * Se non viene specificata un'altezza, verrà utilizzata la stessa del width.
  * 
  * @param $width: La larghezza dell'elemento.
  * @param $height: (Opzionale) L'altezza dell'elemento (default uguale a $width).
**/
/**
  * Mixin per centrare un elemento orizzontalmente e verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento orizzontalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per centrare un elemento verticalmente 
  * utilizzando posizione e trasformazione.
  * 
  * @param $reset: Se impostato su true, ripristina il comportamento iniziale.
**/
/**
  * Mixin per applicare un'ombra personalizzata a un elemento.
  * 
  * @param $top: La distanza dell'ombra dall'alto.
  * @param $left: La distanza dell'ombra da sinistra.
  * @param $blur: Il raggio di sfocatura dell'ombra.
  * @param $spread: L'ampiezza dell'ombra.
  * @param $color: Il colore dell'ombra.
  * @param $inset: (Opzionale) Se impostato su true, applica l'ombra interna.
**/
/**
  * Mixin per stilizzare un elemento checkbox con uno stile personalizzato.
  * 
  * @param $borderColor: Il colore del bordo del checkbox.
  * @param $flagColor: Il colore del flag (spunta) del checkbox.
**/
/**
  * Mixin per nascondere la scrollbar
  * 
**/
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is 
below $min-width, 
$size-at-max-width when page width is above $max-width, 
and linearly scales between the two between $min-width and $max-width*/
/**
  * File scss:     resolution.scss
  * -----------------------------------------------------------
  * Description:   Variabili e mixin per gestire le risoluzioni e le media query 
  *                per dispositivi mobili, tablet e desktop.
**/
/**
  * File scss:     animation.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono settate tutte le
  *                variabili che contengono dati di animazione
**/
/**
  * File scss:     colors.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                i colori principali del design system.
**/
/**
  * File scss:     variables.scss
  * -----------------------------------------------------------
  * Description:   Variabili per margini, gap, padding e border-radius 
  *                utilizzati globalmente nel progetto.
**/
/** 
  * File scss:     typography.scss
  * -----------------------------------------------------------
  * Description:   In questo file vengono definiti 
  *                gli stili e le variabili per font e tipografia.
**/
/**
    * File scss:     buttons.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili base e le varianti per i bottoni.
**/
/**
    * File scss:     containers.scss
    * -----------------------------------------------------------
    * Description:   In questo file vengono definiti 
    *                gli stili per i container 
**/
/**
* File scss:     form.scss
* -----------------------------------------------------------
* Description:   In questo file vengono definiti 
*                gli stili per i form e i loro elementi.
*/
.video-custom-controls {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.video-custom-controls button {
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid #f9fafb;
  color: #f9fafb;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s;
}

.video-custom-controls button svg {
  fill: #f9fafb;
}

.video-custom-controls button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.video-custom-controls button.loop-btn:not(.active) {
  opacity: 0.5;
}

.video-custom-controls button.loop-btn.active {
  background-color: #0066BB;
}

/*# sourceMappingURL=_video-index-js-parent.css.map*/