@layer design-system.components{.vds-carousel{--carousel-padding-block:var(--vds-space-0,0);--carousel-padding-inline:var(--vds-space-0,0);--carousel-slot-gap:var(--vds-space-3,.75rem);--carousel-radius:var(--vds-radius-card,.75rem);--carousel-track-radius:var(--carousel-radius);--carousel-nav-radius:var(--vds-radius-full,9999px);--carousel-nav-offset:var(--vds-space-3,.75rem);--carousel-nav-size:var(--vds-size-md,2.25rem);--carousel-nav-disabled-opacity:var(--vds-opacity-disabled,.5);--carousel-pagination-gap:var(--vds-space-1-5,.375rem);--carousel-pagination-offset:var(--vds-space-3,.75rem);--carousel-bullet-size:.5rem;--carousel-bullet-active-size:1.25rem;--carousel-bullet-radius:var(--vds-radius-full,9999px);--carousel-fraction-font-size:var(--vds-text-sm,.875rem);--carousel-progress-thickness:2px;--carousel-progress-radius:var(--vds-radius-full,9999px);--carousel-scrollbar-thickness:4px;--carousel-scrollbar-radius:var(--vds-radius-full,9999px);--carousel-transition-duration:var(--vds-duration-fast,.18s);--carousel-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--carousel-focus-ring-color:var(--vds-color-ring,var(--carousel-color-solid));--carousel-focus-ring-width:2px;--carousel-focus-ring-offset:2px;--carousel-color-solid:var(--vds-color-primary-solid,#4f46e5);--carousel-bullet-bg:var(--vds-color-border,color-mix(in oklch, currentColor 25%, transparent));--carousel-bullet-bg-hover:var(--vds-color-border-interactive,color-mix(in oklch, currentColor 45%, transparent));--carousel-bullet-active-bg:var(--carousel-color-solid);--carousel-progress-track:var(--vds-color-bg-muted,color-mix(in oklch, currentColor 12%, transparent));--carousel-progress-fill:var(--carousel-color-solid);--carousel-scrollbar-track:var(--vds-color-surface-active,color-mix(in oklch, currentColor 8%, transparent));--carousel-scrollbar-thumb:var(--vds-color-border-interactive,color-mix(in oklch, currentColor 45%, transparent));--carousel-fraction-fg:var(--vds-color-text,#171717)}.vds-carousel[data-color=success]{--carousel-color-solid:var(--vds-color-success-solid,#16a34a)}.vds-carousel[data-color=warning]{--carousel-color-solid:var(--vds-color-warning-solid,#f59e0b)}.vds-carousel[data-color=danger]{--carousel-color-solid:var(--vds-color-danger-solid,#dc2626)}.vds-carousel[data-color=info]{--carousel-color-solid:var(--vds-color-info-solid,#0891b2)}.vds-carousel[data-color=accent]{--carousel-color-solid:var(--vds-color-accent-solid,var(--vds-color-accent-emphasis,#f97316))}.vds-carousel[data-color=neutral]{--carousel-color-solid:var(--vds-color-text,#171717)}.vds-carousel[data-size=xs]{--carousel-nav-offset:var(--vds-space-2,.5rem);--carousel-nav-size:var(--vds-size-xs,1.75rem);--carousel-bullet-size:.375rem;--carousel-bullet-active-size:.875rem;--carousel-pagination-gap:var(--vds-space-1,.25rem);--carousel-pagination-offset:var(--vds-space-2,.5rem)}.vds-carousel[data-size=sm]{--carousel-nav-offset:var(--vds-space-2-5,.625rem);--carousel-nav-size:var(--vds-size-sm,2rem);--carousel-bullet-size:.4375rem;--carousel-bullet-active-size:1rem;--carousel-pagination-gap:var(--vds-space-1,.25rem);--carousel-pagination-offset:var(--vds-space-2-5,.625rem)}.vds-carousel[data-size=lg]{--carousel-nav-offset:var(--vds-space-4,1rem);--carousel-nav-size:var(--vds-size-lg,2.5rem);--carousel-bullet-size:.625rem;--carousel-bullet-active-size:1.5rem;--carousel-pagination-gap:var(--vds-space-2,.5rem);--carousel-pagination-offset:var(--vds-space-4,1rem)}.vds-carousel[data-pagination=bars]{--carousel-bullet-size:1.25rem;--carousel-bullet-active-size:2rem;--carousel-bullet-radius:var(--vds-radius-full,9999px)}.vds-carousel[data-shape=square]{--carousel-nav-radius:var(--vds-radius-control-action,var(--vds-radius-element,.5rem))}}
@layer design-system.components{.vds-carousel{box-sizing:border-box;contain:inline-size;block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding-block:var(--carousel-padding-block);padding-inline:var(--carousel-padding-inline);display:block}.vds-carousel>*+*{margin-block-start:var(--carousel-slot-gap)}.vds-carousel :where(.vds-carousel-track){box-sizing:border-box;block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block;position:relative}.vds-carousel :where(.swiper){z-index:1;box-sizing:border-box;border-radius:var(--carousel-track-radius);direction:ltr;block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;margin-inline:auto;padding:0;list-style:none;position:relative;overflow:hidden}:is(.vds-carousel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) :where(.swiper),.vds-carousel[dir=rtl] :where(.swiper)){direction:rtl}.vds-carousel :where(.swiper-wrapper){z-index:1;box-sizing:content-box;block-size:100%;inline-size:100%;min-inline-size:0;transition-property:transform;transition-timing-function:var(--carousel-transition-easing);will-change:transform;display:flex;position:relative}.vds-carousel :where(.swiper-slide){box-sizing:border-box;flex-shrink:0;block-size:100%;min-inline-size:0;transition-property:transform;position:relative}.vds-carousel :where(.swiper-slide-invisible-blank){visibility:hidden}.vds-carousel[data-orientation=vertical]{block-size:100%;min-block-size:1rem}.vds-carousel[data-orientation=vertical] :where(.swiper){block-size:100%}.vds-carousel[data-orientation=vertical] :where(.swiper-wrapper){flex-direction:column}.vds-carousel[data-orientation=vertical] :where(.swiper-slide){inline-size:100%}.vds-carousel :where(.swiper-autoheight),.vds-carousel :where(.swiper-autoheight .swiper-slide){block-size:auto}.vds-carousel :where(.swiper-autoheight .swiper-wrapper){align-items:flex-start;transition-property:transform,height}.vds-carousel .vds-carousel-nav{z-index:10;border-radius:var(--carousel-nav-radius);aspect-ratio:1;min-inline-size:0;padding-block:0;padding-inline:0;position:absolute;transform:none}.vds-carousel:not([data-orientation=vertical]) .vds-carousel-nav{inset-block-start:50%;translate:0 -50%}.vds-carousel:not([data-orientation=vertical]) .vds-carousel-nav--prev{inset-inline-start:var(--carousel-nav-offset)}.vds-carousel:not([data-orientation=vertical]) .vds-carousel-nav--next{inset-inline-end:var(--carousel-nav-offset)}.vds-carousel[data-orientation=vertical] .vds-carousel-nav{inset-inline-start:50%;translate:-50%}.vds-carousel[data-orientation=vertical] .vds-carousel-nav--prev{inset-block-start:var(--carousel-nav-offset)}.vds-carousel[data-orientation=vertical] .vds-carousel-nav--next{inset-block-end:var(--carousel-nav-offset)}.vds-carousel[data-variant=outside]:not([data-orientation=vertical]){padding-inline:calc(var(--carousel-nav-offset) * 2 + var(--carousel-nav-size))}.vds-carousel[data-variant=outside]:not([data-orientation=vertical]) .vds-carousel-nav--prev{inset-inline-start:0}.vds-carousel[data-variant=outside]:not([data-orientation=vertical]) .vds-carousel-nav--next{inset-inline-end:0}:is(.vds-carousel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):not([data-orientation=vertical]) .vds-carousel-nav .vds-button-label>svg,.vds-carousel[dir=rtl]:not([data-orientation=vertical]) .vds-carousel-nav .vds-button-label>svg){transform:scaleX(-1)}.vds-carousel :where(.vds-carousel-nav--disabled){opacity:var(--carousel-nav-disabled-opacity);cursor:not-allowed;pointer-events:none}.vds-carousel :where(.vds-carousel-nav--hidden){visibility:hidden;opacity:0}.vds-carousel :where(.vds-carousel-nav--locked){display:none!important}.vds-carousel :where(.swiper-pagination){z-index:10;justify-content:center;align-items:center;gap:var(--carousel-pagination-gap);pointer-events:none;transition:opacity var(--carousel-transition-duration) var(--carousel-transition-easing);display:flex;position:absolute;inset-block-end:var(--carousel-pagination-offset);inset-inline:0}.vds-carousel :where(.swiper-pagination-hidden){opacity:0}.vds-carousel :where(.swiper-pagination-lock){display:none}.vds-carousel :where(.swiper-pagination-bullet){inline-size:var(--carousel-bullet-size);block-size:var(--carousel-bullet-size);border-radius:var(--carousel-bullet-radius);background-color:var(--carousel-bullet-bg);opacity:1;pointer-events:auto;cursor:pointer;transition:background-color var(--carousel-transition-duration) var(--carousel-transition-easing), inline-size var(--carousel-transition-duration) var(--carousel-transition-easing);border:0;margin:0;display:inline-block}.vds-carousel :where(.swiper-pagination-bullet):hover{background-color:var(--carousel-bullet-bg-hover)}.vds-carousel :where(.swiper-pagination-bullet):focus-visible{outline:var(--carousel-focus-ring-width) solid var(--carousel-focus-ring-color);outline-offset:var(--carousel-focus-ring-offset)}.vds-carousel :where(.swiper-pagination-bullet-active){inline-size:var(--carousel-bullet-active-size);background-color:var(--carousel-bullet-active-bg)}.vds-carousel[data-orientation=vertical] :where(.swiper-pagination){flex-direction:column;inline-size:auto;inset-block:0;inset-inline-start:auto;inset-inline-end:var(--carousel-pagination-offset)}.vds-carousel[data-orientation=vertical] :where(.swiper-pagination-bullet){inline-size:var(--carousel-bullet-size);block-size:var(--carousel-bullet-size)}.vds-carousel[data-orientation=vertical] :where(.swiper-pagination-bullet-active){block-size:var(--carousel-bullet-active-size);inline-size:var(--carousel-bullet-size)}.vds-carousel :where(.swiper-pagination-fraction){inline-size:max-content;max-inline-size:calc(100% - var(--carousel-pagination-offset) * 2);box-sizing:border-box;block-size:max-content;color:var(--carousel-fraction-fg);font-family:var(--vds-font-sans,ui-sans-serif, system-ui, sans-serif);font-size:var(--carousel-fraction-font-size);font-variant-numeric:tabular-nums;pointer-events:auto;padding-inline:var(--vds-space-2-5,.625rem);padding-block:var(--vds-space-1,.25rem);background-color:color-mix(in oklch, var(--vds-color-surface,#fff) 80%, transparent);border-radius:var(--vds-radius-full,9999px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin:auto}.vds-carousel :where(.swiper-pagination-progressbar){z-index:10;inline-size:100%;block-size:var(--carousel-progress-thickness);background-color:var(--carousel-progress-track);pointer-events:none;border-radius:0;position:absolute;inset-block:0 auto;inset-inline:0;overflow:hidden}.vds-carousel :where(.swiper-pagination-progressbar .swiper-pagination-progressbar-fill){background-color:var(--carousel-progress-fill);transform-origin:0;border-radius:var(--carousel-progress-radius);block-size:100%;inline-size:100%;position:absolute;inset-block:0;inset-inline-start:0;transform:scaleX(0)}:is(.vds-carousel:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) :where(.swiper-pagination-progressbar .swiper-pagination-progressbar-fill),.vds-carousel[dir=rtl] :where(.swiper-pagination-progressbar .swiper-pagination-progressbar-fill)){transform-origin:100%}.vds-carousel :where(.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite){inset-block:auto 0}.vds-carousel[data-pagination-position=top] :where(.swiper-pagination){inset-block-start:var(--carousel-pagination-offset);inset-block-end:auto}.vds-carousel[data-pagination-position=outside]{padding-block-end:calc(var(--carousel-bullet-active-size) + var(--carousel-pagination-offset) * 2)}.vds-carousel[data-pagination-position=outside] :where(.swiper-pagination){inset-block-end:0}.vds-carousel :where(.swiper-scrollbar){z-index:10;background-color:var(--carousel-scrollbar-track);border-radius:var(--carousel-scrollbar-radius);position:absolute}.vds-carousel:not([data-orientation=vertical]) :where(.swiper-scrollbar){inline-size:98%;block-size:var(--carousel-scrollbar-thickness);inset-block-end:var(--carousel-pagination-offset);inset-inline:1%}.vds-carousel[data-orientation=vertical] :where(.swiper-scrollbar){inline-size:var(--carousel-scrollbar-thickness);block-size:98%;inset-block:1%;inset-inline-end:var(--carousel-pagination-offset)}.vds-carousel :where(.swiper-scrollbar-drag){background-color:var(--carousel-scrollbar-thumb);border-radius:var(--carousel-scrollbar-radius);cursor:grab;block-size:100%;inline-size:100%;position:relative}.vds-carousel :where(.swiper-scrollbar-drag):active,.vds-carousel :where(.swiper-scrollbar-cursor-drag){cursor:grabbing}.vds-carousel :where(.swiper-scrollbar-lock){display:none}.vds-carousel :where(.swiper-lazy-preloader){--carousel-preloader-size:var(--vds-size-lg,2.5rem);inline-size:var(--carousel-preloader-size);block-size:var(--carousel-preloader-size);z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--carousel-progress-track);border-block-start-color:#0000;border-radius:50%;margin-block-start:calc(var(--carousel-preloader-size) / -2);margin-inline-start:calc(var(--carousel-preloader-size) / -2);animation:1s linear infinite vds-carousel-spin;position:absolute;inset-block-start:50%;inset-inline-start:50%}@keyframes vds-carousel-spin{to{transform:rotate(360deg)}}.vds-carousel :where(.swiper-zoom-container){text-align:center;justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex}.vds-carousel :where(.swiper-zoom-container>img),.vds-carousel :where(.swiper-zoom-container>svg),.vds-carousel :where(.swiper-zoom-container>canvas){object-fit:contain;max-block-size:100%;max-inline-size:100%}.vds-carousel :where(.swiper-fade.swiper-free-mode .swiper-slide){transition-timing-function:ease-out}.vds-carousel :where(.swiper-fade .swiper-slide){pointer-events:none;transition-property:opacity}.vds-carousel :where(.swiper-fade .swiper-slide .swiper-slide){pointer-events:none}.vds-carousel :where(.swiper-fade .swiper-slide-active),.vds-carousel :where(.swiper-fade .swiper-slide-active .swiper-slide-active){pointer-events:auto}@media (prefers-reduced-motion:reduce){.vds-carousel :where(.swiper-wrapper),.vds-carousel :where(.swiper-pagination-bullet),.vds-carousel :where(.vds-carousel-nav){transition-duration:.01ms!important}.vds-carousel :where(.swiper-lazy-preloader){animation-duration:1.5s}}}