{"version":3,"file":"marquee.css.cjs","names":[],"sources":["../../../src/content/marquee/marquee.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--color-canvas);\n    --_radius: var(--rounded-xl);\n\n    position: relative;\n    display: block;\n    width: 100%;\n    min-height: 240px;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .track {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    display: flex;\n    flex-direction: row;\n    gap: var(--marquee-gap, var(--size-4));\n    align-items: stretch;\n    width: max-content;\n    animation: marquee-scroll var(--_marquee-duration, 20s) linear infinite;\n    will-change: transform;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-0-5);\n    align-items: center;\n    pointer-events: none;\n  }\n\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    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  :host([direction='right']) .track {\n    animation-direction: reverse;\n  }\n\n  :host([pause-on-hover]:hover) .track {\n    animation-play-state: paused;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    flex: 0 0 auto;\n    height: 100%;\n  }\n\n  ::slotted([data-marquee-clone]) {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  @keyframes marquee-scroll {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(var(--_marquee-translate, -50%));\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n  }\n}\n"],"mappings":""}