.variant-scroll{display:flex;flex-wrap:wrap;gap:var(--variant-scroll-gap, 1.6rem);width:100%}.variant-scroll--on{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;--variant-scroll-folga: .7rem;padding:var(--variant-scroll-folga);margin:calc(var(--variant-scroll-folga) * -1);margin-block-start:calc(var(--variant-label-gap, 12px) - var(--variant-scroll-folga));width:calc(100% + var(--variant-scroll-folga) * 2);scroll-padding-inline:var(--variant-scroll-folga)}.variant-scroll--on::-webkit-scrollbar{display:none}.variant-scroll--on>label{flex:0 0 auto;scroll-snap-align:start}.product-form__input:has(.variant-scroll){display:block;min-width:0;max-width:100%}.product-form__input:has(.variant-scroll--on) .form__label{margin-block-end:0}.variant-scroll--on{min-width:0;max-width:100%}.variant-scroll-bar{display:block;width:100%;margin-block-start:1.2rem;touch-action:none}.variant-scroll--on~.variant-scroll-bar{margin-block-start:var(--variant-bar-gap, .6rem)}.variant-scroll-bar__track{display:block;width:100%;height:var(--variant-bar-height, 3px);background-color:var(--variant-bar-track, rgba(var(--color-foreground), .1));border-radius:999px;overflow:hidden}.variant-scroll-bar__fill{display:block;width:0;height:100%;background-color:var(--variant-bar-fill, rgb(var(--color-foreground)));border-radius:inherit;transition:width .1s linear}@media(pointer:fine){.variant-scroll--on{cursor:grab}.variant-scroll--arrastando{cursor:grabbing;-webkit-user-select:none;user-select:none}.variant-scroll--arrastando label{pointer-events:none}.variant-scroll-bar{cursor:pointer}}@media(max-width:767.98px){.variant-scroll--mobile-only~.variant-scroll-bar,.variant-scroll--on~.variant-scroll-bar{display:block}}@media(min-width:768px){.variant-scroll--mobile-only{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}.variant-scroll--mobile-only~.variant-scroll-bar{display:none}}@media(max-width:767.98px){.variant-scroll--on{--swatch-size: var(--swatch-size-scroll-mobile, 72px)}}@media(min-width:768px){.variant-scroll--on:not(.variant-scroll--mobile-only){--swatch-size: var(--swatch-size-scroll-desktop, 64px)}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/component-variant-scroll.css.map */