ui-swatches{border-radius:6px;padding:12px;border:1px solid var(--color-navy);display:grid;gap:10px;align-items:center;box-sizing:border-box;--swatch-size: 30px}ui-swatches.is-inline{display:block;gap:20px}.ui-swatches__prefix{font-size:14px;font-weight:500;line-height:18px;letter-spacing:.14px;position:relative;display:flex;align-items:center;margin-bottom:10px;font-family:var(--font-caption-family)}.ui-swatches__options{display:flex;align-items:center;gap:8px}.ui-swatches__radio{position:absolute;opacity:0}.ui-swatches__swatch{display:block;border-radius:50%;height:var(--swatch-size);width:var(--swatch-size);background-color:var(--swatch-color);position:relative;transition:all .3s ease-in-out;border:solid 1px transparent}.ui-swatches__swatch:before{background-color:var(--swatch-color);border:solid 2px transparent;content:"";border-radius:50%;display:block;width:100%;height:100%}.ui-swatches__radio:checked~.ui-swatches__swatch{border-color:var(--color-navy)}.ui-swatches__radio:checked~.ui-swatches__swatch:before{border-color:#fff}.ui-swatches__radio:checked~.ui-swatches__text{opacity:1}.ui-swatches__radio:not(:checked)~.ui-swatches__swatch{opacity:.5}.ui-swatches__label{display:flex;align-items:center;cursor:pointer;font-family:var(--font-caption-family);font-size:13px;font-weight:700;line-height:14px;letter-spacing:1.04px;text-transform:uppercase}.ui-swatches__label:has(input:focus-visible){outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.3rem;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}.ui-swatches__label:hover .ui-swatches__swatch{opacity:1}.ui-swatches__text{margin-left:6px;opacity:.6;transition:opacity .3s ease-in-out}@media screen and (min-width: 390px){ui-swatches{padding:12px 16px}.ui-swatches__options{gap:20px}}@media screen and (min-width: 750px){ui-swatches{padding:15px}.ui-swatches__options{gap:8px}.ui-swatches__label{font-size:14px}.ui-swatches__text{margin-left:10px}}@media screen and (min-width: 1200px){ui-swatches.is-inline{display:inline-flex}.ui-swatches__options{margin-top:0}.ui-swatches__prefix{margin-bottom:0}}
/*# sourceMappingURL=/cdn/shop/t/335/assets/component-ui-swatches.css.map */