// =============================================================================
// 31-modules / video / mixins
// =============================================================================

@use "sass:map";
@use "./video.config" as config;

@mixin ss-video {
    display: block;
    width: 100%;
    height: auto;
    background-color: map.get(config.$video-config, "background");
}

@mixin ss-video-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    > video,
    > iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

@mixin ss-video-rounded {
    border-radius: map.get(config.$video-config, "radius-rounded");
    overflow: hidden;
}