.color-variant-picker{margin-bottom:2.4rem}.color-variant-picker__header{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem}.color-variant-picker__heading{font-size:1.6rem;font-weight:600;color:rgb(var(--color-foreground));margin:0}.color-variant-picker__selected-label{font-size:1.4rem;color:rgb(var(--color-foreground));opacity:1;transition:opacity .3s ease}.color-variant-picker__wrapper{position:relative;display:flex;align-items:center;gap:.8rem}.color-variant-picker__options{display:flex;flex-wrap:nowrap;gap:1.2rem;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;padding:.4rem 0}.color-variant-picker__options::-webkit-scrollbar{display:none}.color-variant-picker__arrow{display:none;flex-shrink:0;width:4rem;height:4rem;border-radius:50%;border:2px solid rgb(var(--color-border));background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;transition:all .3s ease;align-items:center;justify-content:center;padding:0}.color-variant-picker__arrow:hover:not(:disabled){border-color:currentColor;color:rgb(var(--color-background));transform:scale(1.05)}.color-variant-picker__arrow:active:not(:disabled){transform:scale(.95)}.color-variant-picker__arrow:disabled{opacity:.3;cursor:not-allowed}.color-variant-picker__arrow svg{width:2rem;height:2rem;display:block}.color-variant-picker__arrow--prev{order:-1}.color-variant-picker__arrow--next{order:1}.color-variant-picker__option{display:flex;align-items:center;justify-content:center;padding:1.2rem;border:2px solid rgb(var(--color-border));border-radius:8px;background-color:rgb(var(--color-background));text-decoration:none;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.color-variant-picker__option:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:0;transition:opacity .3s ease;pointer-events:none}.color-variant-picker__option.is-active:before,.color-variant-picker__option:hover:before{opacity:.05}.color-variant-picker__option:hover{border-color:currentColor;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.color-variant-picker__option:active{transform:translateY(0)}.color-variant-picker__option-image{width:8rem;height:8rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.color-variant-picker__option-image img{width:100%;height:100%;object-fit:contain;display:block}.color-variant-picker__option-handle{display:none}.color-variant-picker__option-swatch{width:3.2rem;height:3.2rem;border-radius:50%;border:2px solid rgb(var(--color-border));flex-shrink:0;transition:all .3s ease}.color-variant-picker__option:hover .color-variant-picker__option-swatch{border-color:currentColor;box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px currentColor}.color-variant-picker__option--active{border-color:rgb(var(--color-button));border-width:3px;background-color:rgb(var(--color-button-secondary-background))}.color-variant-picker__options.is-hovering .color-variant-picker__option--active{border-color:rgb(var(--color-border));border-width:2px;background-color:rgb(var(--color-background))}.color-variant-picker__options.is-hovering .color-variant-picker__option:hover{border-color:rgb(var(--color-button));border-width:3px;background-color:rgb(var(--color-button-secondary-background))}.color-variant-picker__option{flex-shrink:0}.color-variant-picker__wrapper:has(.color-variant-picker__options[data-has-many=true]) .color-variant-picker__arrow{display:flex}.color-variant-picker__options[data-has-many=true]+.color-variant-picker__arrow--next{display:flex}.color-variant-picker__arrow--prev+.color-variant-picker__options[data-has-many=true]~.color-variant-picker__arrow--next{display:flex}@media screen and (max-width: 749px){.color-variant-picker__option{flex-direction:column;justify-content:center;padding:1rem;min-width:8rem;width:auto;gap:.8rem}.color-variant-picker__option-image{width:6rem;height:6rem;flex-shrink:0}.color-variant-picker__option-swatch{width:2.4rem;height:2.4rem}.color-variant-picker__option-handle{display:block;font-size:1.2rem;font-weight:500;color:rgb(var(--color-foreground));position:relative;z-index:1;text-align:center;white-space:nowrap}.color-variant-picker__header{flex-direction:column;align-items:flex-start;gap:.8rem}.color-variant-picker__arrow{width:3.2rem;height:3.2rem}.color-variant-picker__arrow svg{width:1.6rem;height:1.6rem}}@media screen and (min-width: 750px){.color-variant-picker__option{flex-direction:row;min-width:auto;width:auto;gap:1.2rem}.color-variant-picker__option-image{width:8rem;height:8rem}.color-variant-picker__option-swatch{width:3.2rem;height:3.2rem}.color-variant-picker__option-handle{display:block;font-size:1.4rem;font-weight:500;color:rgb(var(--color-foreground));white-space:nowrap}}@media screen and (min-width: 990px){.color-variant-picker__option-swatch{width:4rem;height:4rem}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/component-color-variant-picker.css.map */