/* =============================================================================
   Media / Slider Indicators — GLOBAL, unscoped
   Punkte + aktive Pille + Prev/Next-Chevrons. Eine Quelle fuer alle Slider:
   Galerie-Detail-Slider (.media-wrapper .media-indicators) UND Item-Modal.
   Frueher dupliziert in detail.css (gescoped) + index.css (.media_item_modal_nav).
   ============================================================================= */

.media-indicators{
display:flex;
justify-content:center;
align-items:center;
gap:.35rem;
margin-top:1rem;
}

.media-indicators button{
position:relative;
width:.35rem;
height:.35rem;
padding:0;
border:1px solid transparent;
border-radius:50%;
background:var(--gray-88);
cursor:pointer;
overflow:hidden;
/* border-radius erst NACH dem Breiten-Uebergang zuruecksetzen (Delay 250ms),
 * damit die schrumpfende Pille nicht als Ellipse durchlaeuft */
transition:width 250ms ease-in, background 250ms ease-in, border-radius 0ms 250ms;
}

.media-indicators button span{
display:none;
}

.media-indicators button.pre,
.media-indicators button.next{
width:1rem;
height:1rem;
background:none;
border:none;
border-radius:0;
overflow:visible;
font-size:0;
}

/* Chevron-Icons (Sprite #chevron-left/right) statt ::before-Maske */
.media-indicators button.pre svg,
.media-indicators button.next svg{
width:100%;
height:100%;
color:var(--gray-42);
pointer-events:none;
}

.media-indicators button.pre:hover svg,
.media-indicators button.next:hover svg{
opacity:.7;
}

.media-indicators button.is-active{
width:1.35rem;
border:var(--gray-84) 1px solid;
background:var(--gray-42);
border-radius:var(--radius-xs);
/* Radius beim Aktivieren SOFORT klein setzen (Delay 0) -> abgerundetes Rechteck
 * statt in die Laenge gezogener Ellipse */
transition:width 250ms ease-in, background 250ms ease-in, border-radius 0ms 0ms;
}

/* Autoplay-Fortschritt (nur Galerie-Slider setzt .progress-run per JS) */
.media-indicators button::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0;
height:100%;
background:currentColor;
opacity:.5;
pointer-events:none;
}

.media-indicators button.progress-run::after{
animation:cms-slider-progress var(--autoplay-delay) linear forwards;
}

@keyframes cms-slider-progress{
from{ width:0; }
to{ width:100%; }
}