{"version":3,"file":"carousel.css.cjs","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--carousel-bg, var(--color-canvas));\n --_radius: var(--carousel-radius, var(--rounded-xl));\n --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: var(--carousel-min-height, 240px);\n overflow: hidden;\n touch-action: auto;\n outline: none;\n background: var(--_bg);\n border-radius: var(--_radius);\n }\n\n /* ── Track ──────────────────────────────────────────────────────── */\n\n .track {\n position: relative;\n flex: 1 1 auto;\n width: 100%;\n min-height: 0;\n }\n\n /* ── Controls (prev / next) ────────────────────────────────────────────── */\n\n /* Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. */\n\n .controls {\n display: flex;\n gap: var(--size-0-5);\n align-items: center;\n margin-inline-start: auto;\n pointer-events: none;\n }\n\n /* Controls rendered standalone (no indicators bar) — needs own positioning + backdrop. */\n :host > .controls {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n padding: var(--size-1-5) var(--size-2);\n margin-inline-start: 0;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n }\n\n .nav-btn {\n pointer-events: auto;\n }\n\n /* ── Variant-specific track styles ────────────────────────────────────── */\n\n /* Gallery: flex row, fills host, shows active + two thumbnails */\n :host([variant='gallery']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-gallery-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='gallery'][orientation='vertical']) .track {\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Filmstrip: flex row/column with absolute positioning to fill host */\n :host([variant='filmstrip']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-filmstrip-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='filmstrip'][orientation='vertical']) .track {\n flex-direction: column;\n width: 100%;\n }\n\n /* ── Vertical orientation ──────────────────────────────────────────────── */\n\n :host([orientation='vertical']) {\n --_slide-translate-before: translateY(-100%);\n --_slide-translate-after: translateY(100%);\n }\n\n :host([orientation='vertical']) .indicators {\n inset-block: 50% auto;\n inset-inline: var(--size-3) auto;\n flex-direction: column;\n width: auto;\n height: max-content;\n padding-block: var(--size-6) var(--size-2);\n padding-inline: var(--size-1-5);\n border-radius: var(--rounded-full);\n transform: translateX(0) translateY(-50%);\n }\n\n :host([orientation='vertical']) .controls {\n flex-direction: column;\n margin-block-start: auto;\n margin-inline-start: 0;\n }\n\n :host([orientation='vertical']) > .controls {\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n margin-block-start: 0;\n }\n\n :host([orientation='vertical']) .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n }\n\n :host([orientation='vertical']) .indicator-active {\n width: var(--size-1-5);\n height: var(--size-8);\n }\n\n /* animation properties are inherited from .indicator-active ore-progress::part(fill) below */\n\n /* ── Bottom nav bar: indicators + controls ───────────────────────────── */\n\n /* Floats above the bottom edge, shrinks to content width, centered.\n A frosted backdrop keeps it legible over any image. */\n\n .indicators {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline: 50%;\n display: flex;\n flex-direction: row;\n gap: var(--size-1-5);\n align-items: center;\n width: max-content;\n padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n pointer-events: none;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n transform: translateX(-50%);\n }\n\n .indicator {\n display: block;\n flex-shrink: 0;\n padding: 0;\n pointer-events: auto;\n cursor: pointer;\n background: none;\n border: none;\n transition: opacity var(--transition-fast);\n }\n\n .indicator > ore-progress {\n display: block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n /* Inactive indicator: small circle */\n .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n overflow: hidden;\n border-radius: var(--rounded-full);\n }\n\n /* Active indicator: wider pill (progress bar) */\n .indicator-active {\n --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n width: var(--size-8);\n }\n\n .indicator:focus-visible {\n outline: var(--border) solid currentcolor;\n outline-offset: 2px;\n }\n\n .indicator:hover {\n opacity: 0.8;\n }\n\n .indicator ore-progress::part(fill) {\n transition: width var(--transition-normal);\n }\n\n .indicator-active ore-progress::part(fill) {\n animation-name: var(--carousel-animation-name, none);\n animation-duration: calc(var(--carousel-timeout, 4000) * 1ms);\n animation-timing-function: var(--ease-linear);\n animation-fill-mode: forwards;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --carousel-transition-duration: 0s;\n }\n}\n\n@keyframes carousel-fill {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes carousel-fill-v {\n from {\n height: 0%;\n }\n\n to {\n height: 100%;\n }\n}\n"],"mappings":""}