.color-swatch-picker{--color-swatch-size: 44px;--color-swatch-gap: 8px;--color-swatch-border-width: 1px;--color-swatch-border-radius: 50%}.color-swatch-picker__label{display:block;margin-bottom:.8rem}.color-swatch-picker__selected-value{font-weight:600}.color-swatch-picker__options{display:flex;flex-wrap:wrap;gap:var(--color-swatch-gap);border:none;padding:0;margin:0}.color-swatch-picker__option{position:relative}.color-swatch-picker__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.color-swatch-picker__swatch{display:block;width:var(--color-swatch-size);height:var(--color-swatch-size);cursor:pointer;border-radius:var(--color-swatch-border-radius);outline-offset:.2rem;outline-color:transparent;outline-style:solid;transition-property:outline-color,outline-width,box-shadow;transition-duration:var(--duration-short);transition-timing-function:ease}.color-swatch-picker__swatch-inner{display:block;width:100%;height:100%;border-radius:var(--color-swatch-border-radius);background:var(--swatch-background);background-position:var(--swatch-focal-point, center);background-size:cover;background-origin:border-box;border:var(--color-swatch-border-width) solid rgba(var(--color-foreground),.15)}.color-swatch-picker__swatch-inner--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5)}.color-swatch-picker__input:checked+.color-swatch-picker__swatch{outline:.2rem solid var(--color-swatch-active-outline, rgb(var(--color-foreground)))}.color-swatch-picker__input:focus-visible+.color-swatch-picker__swatch{outline:.2rem solid rgba(var(--color-foreground),.5);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .5rem rgba(var(--color-foreground),.25)}.color-swatch-picker__input:checked:focus-visible+.color-swatch-picker__swatch{outline:none;box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .4rem rgba(var(--color-foreground),.25)}.color-swatch-picker__input.visually-disabled:not(:checked)+.color-swatch-picker__swatch{opacity:.4}.color-swatch-picker__input.visually-disabled:not(:checked)+.color-swatch-picker__swatch:hover{outline:none}.color-swatch-picker__input.visually-disabled+.color-swatch-picker__swatch .color-swatch-picker__swatch-inner{position:relative;overflow:hidden}.color-swatch-picker__input.visually-disabled+.color-swatch-picker__swatch .color-swatch-picker__swatch-inner:after{content:"";position:absolute;bottom:-.05rem;left:0;width:calc(var(--color-swatch-size) * 1.414);height:.1rem;background-color:rgb(var(--color-foreground));transform:rotate(-45deg);transform-origin:left}.color-swatch-picker--inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--color-swatch-gap)}.color-swatch-picker__label--inline{display:inline-flex;align-items:center;margin-bottom:0;margin-right:.4rem;white-space:nowrap}.color-swatch-picker--inline .color-swatch-picker__options{display:inline-flex;gap:1.5rem}.color-swatch-card-picker{--card-gap: 12px;--card-border-radius: 8px;--card-active-border-color: #1a73e8;--badge-gradient: linear-gradient(90deg, #3B82F6, #1D4ED8);--badge-text-color: #ffffff}.color-swatch-card-picker__options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--card-gap);border:none;padding:0;margin:0}.color-swatch-card-picker__option{position:relative}.color-swatch-card-picker__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.color-swatch-card-picker__card{display:block;cursor:pointer;border:2px solid rgba(var(--color-foreground),.1);border-radius:var(--card-border-radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;background:rgb(var(--color-background))}.color-swatch-card-picker__card:hover{border-color:rgba(var(--color-foreground),.3)}.color-swatch-card-picker__card-inner{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;padding:0 12px}.color-swatch-card-picker__image-wrapper{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px}.color-swatch-card-picker__image-wrapper--empty{background:rgba(var(--color-foreground),.05);color:rgba(var(--color-foreground),.3)}.color-swatch-card-picker__image-wrapper--empty .phosphor-icon{font-size:24px}.color-swatch-card-picker__image{width:100%;height:100%;object-fit:contain}.color-swatch-card-picker__name{flex:1;font-size:14px;font-weight:500;color:rgb(var(--color-foreground));line-height:1.3;text-align:left}.color-swatch-card-picker__card--has-badge .color-swatch-card-picker__name{margin-top:12px}.color-swatch-card-picker__card--has-badge{position:relative}.color-swatch-card-picker__badge{position:absolute;top:0;left:0;z-index:1;background:var(--badge-gradient);color:var(--badge-text-color);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;padding:2px 10px;line-height:1.2;border-radius:0 0 4px}.color-swatch-card-picker__input:checked+.color-swatch-card-picker__card{border-color:var(--card-active-border-color);box-shadow:0 0 0 1px var(--card-active-border-color)}.color-swatch-card-picker__input:focus-visible+.color-swatch-card-picker__card{outline:2px solid rgba(var(--color-foreground),.5);outline-offset:2px}.color-swatch-card-picker__input.visually-disabled:not(:checked)+.color-swatch-card-picker__card{opacity:.5}.color-swatch-card-picker__input.visually-disabled:not(:checked)+.color-swatch-card-picker__card:hover{border-color:rgba(var(--color-foreground),.1)}
/*# sourceMappingURL=/cdn/shop/t/12/assets/component-color-swatch.css.map */