.paint-samples{display:block;margin:2.5rem 0}.paint-samples__fieldset{border:0;margin:0;padding:0;min-width:0}.paint-samples__hint{margin:0 0 1.2rem}.paint-samples__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:1rem}.paint-samples__tile{position:relative;display:block;aspect-ratio:1;cursor:pointer}.paint-samples__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.paint-samples__swatch{display:block;width:100%;height:100%;background:rgba(var(--color-foreground),.08);border:.1rem solid rgba(var(--color-foreground),.15);outline:.2rem solid transparent;outline-offset:.2rem;transition:outline-color var(--duration-short) ease}.paint-samples__swatch img{display:block;width:100%;height:100%;object-fit:cover}.paint-samples__tile:hover .paint-samples__swatch{outline-color:rgba(var(--color-foreground),.4)}.paint-samples__input:checked+.paint-samples__swatch{outline-color:rgb(var(--color-foreground))}.paint-samples__input:focus-visible+.paint-samples__swatch{outline-color:rgb(var(--color-foreground));box-shadow:0 0 0 .5rem rgba(var(--color-foreground),.25)}.paint-samples__input:checked+.paint-samples__swatch:after{content:"";position:absolute;top:.4rem;right:.4rem;width:2rem;height:2rem;border-radius:50%;background:rgb(var(--color-foreground)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5l3.2 3L11 1' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 1.1rem no-repeat}.paint-samples__tile--unavailable,.paint-samples__tile--unavailable .paint-samples__input{cursor:not-allowed}.paint-samples__tile--unavailable .paint-samples__swatch{outline:none}.paint-samples__tile--unavailable .paint-samples__swatch img{opacity:.35}.paint-samples__tile--unavailable .paint-samples__swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,transparent calc(50% - .1rem),rgba(var(--color-foreground),.55) calc(50% - .1rem),rgba(var(--color-foreground),.55) calc(50% + .1rem),transparent calc(50% + .1rem))}.paint-samples__summary{margin:2rem 0 1.5rem}.paint-samples__summary p{margin:0 0 .4rem}.paint-samples__add{position:relative}.paint-samples__add.loading>span{visibility:hidden}.paint-samples__add .loading__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.8rem}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-paint-sample-picker.css.map */