/**
 * @author     Igor Generalov <igor@generalov.net>
 * @copyright  Copyright © 2026 Igor Generalov. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 * @link       https://generalov.net
 */
/* Layout, widths, gaps, overlays and typography come from the native Overlay Slider. */
/* Width animation is controlled in pixels in both directions by video-slider.js. */
.vs-slider .vs-item { position: relative; max-width: 100%; }
.vs-slider .vs-media { position: relative; max-width: 100%; }
.vs-slider .vs-cover {
    display: block; position: relative; max-width: 100%; margin: 0; padding: 0;
    border: 0; color: #fff; background: #171717; cursor: pointer; font: inherit;
}
.vs-slider .vs-cover:disabled { cursor: default; }
.vs-slider .vs-cover > img { display: block; }
.vs-slider .vs-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid;
    place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: #0009; border: 1px solid #ffffff80; z-index: 1;
}
.vs-slider .vs-play > [uk-icon] { display: flex; align-items: center; justify-content: center; line-height: 0; }
.vs-slider .vs-play svg { display: block; }
.vs-slider .vs-item.is-expanded { width: 100%; }
.vs-slider .vs-item.is-expanded > :not(.vs-media) { visibility: hidden; pointer-events: none; }
.vs-slider .vs-item.is-expanded .vs-media { width: 100%; background: #000; }
.vs-slider .vs-player { position: absolute; inset: 0; background: #000; z-index: 2; }
.vs-slider .vs-player > :is(video,iframe) { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.vs-slider .vs-close {
    position: absolute; inset-inline-end: 10px; top: 10px; display: grid;
    place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff80;
    border-radius: 50%; background: #000b; color: #fff; cursor: pointer;
    font: 28px/1 sans-serif; z-index: 3;
}
.vs-slider [hidden] { display: none !important; }
.vs-slider :is(.vs-cover,.vs-close):focus-visible { outline: 3px solid #458fff; outline-offset: -4px; }
.vs-slider .vs-invalid { position: absolute; inset: 20% 10% auto; text-align: center; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .vs-slider .vs-slide { transition: none; } }

.vs-slider .vs-item.is-collapsing .vs-cover { width: 100%; height: 100%; }
.vs-slider .vs-item.is-collapsing .vs-cover > img { width: 100%; height: 100%; object-fit: cover; }

.vs-slider .vs-duplicate-nav { display: none !important; }