@use "sass:list";
@use "sass:map";
@use "../../01-core/external" as *;

$ss-viewport-config: (
    aspect-ratio: list.slash(16, 9),
    min-height: q(240),
    bg: var(--ss-color-surface-muted),
    fg: var(--ss-color-text),
    border: q(1) solid var(--ss-color-border),
    radius: var(--ss-radius-md),
    overlay-bg: color-mix(in srgb, var(--ss-color-background) 82%, transparent),
    overlay-gap: q(12),
    overlay-padding: q(16),
    progress-height: q(4),
    progress-track: var(--ss-color-surface-2),
    progress-bar: var(--ss-color-accent),
    duration: var(--ss-duration-200),
    easing: var(--ss-ease-out),
    ratios: (
        square: list.slash(1, 1),
        "4x3": list.slash(4, 3),
        wide: list.slash(21, 9),
        panorama: list.slash(2, 1),
    ),
) !default;