handmade-bag-color-picker.handmade-bag-colors{display:block;margin-block:16px 0;--handmade-color-accent:rgb(var(--color-button));--handmade-color-text:rgb(var(--color-foreground))}
.handmade-bag-colors [hidden]{display:none!important}
.handmade-bag-colors__group{display:block;width:100%;max-width:100%;min-inline-size:0;padding:0;border:0;margin:0;text-align:left}
.handmade-bag-colors .handmade-bag-colors__label{padding:0;margin:0 0 10px;font-size:14px;line-height:22px;font-weight:400;color:inherit;min-height:22px;text-align:left}
.handmade-bag-colors__label span{font-weight:500}
.handmade-bag-colors__options{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.handmade-bag-colors__option{display:block;position:relative;cursor:pointer;flex:0 0 48px;margin:0}
.handmade-bag-colors__radio,.handmade-bag-colors__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.handmade-bag-colors__tile{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid transparent;padding:2px;border-radius:13px;box-sizing:border-box;text-decoration:none;color:inherit;background:transparent}
.handmade-bag-colors__image{display:flex;position:relative;width:40px;height:40px;flex:none;border-radius:9px;overflow:hidden;background:rgb(var(--color-foreground)/.04);align-items:center;justify-content:center}
.handmade-bag-colors__image img{display:block;width:100%;height:100%;object-fit:contain}
.handmade-bag-colors__image--detail img{position:absolute;max-width:none;width:var(--sample-zoom);height:var(--sample-zoom);left:50%;top:50%;object-fit:cover;transform:translate(calc(-1 * var(--sample-x)),calc(-1 * var(--sample-y)))}
.handmade-bag-colors__radio:checked+.handmade-bag-colors__tile,.handmade-bag-colors__tile[aria-current=true]{border-color:var(--handmade-color-accent)}
.handmade-bag-colors__radio:focus-visible+.handmade-bag-colors__tile,.handmade-bag-colors__tile:focus-visible{outline:2px solid var(--handmade-color-text);outline-offset:3px}
.handmade-bag-colors__radio[data-myart-pointer-focus]:focus+.handmade-bag-colors__tile{outline:none}
.handmade-bag-colors__options--circles .handmade-bag-colors__tile,.handmade-bag-colors__options--circles .handmade-bag-colors__image{border-radius:50%}
.handmade-bag-colors__tile--single{cursor:default}
.handmade-bag-colors__missing{font-size:9px;line-height:12px;padding:2px;text-align:center;overflow-wrap:anywhere}
.handmade-bag-colors__status--error{position:static;width:auto;height:auto;clip:auto;white-space:normal;margin:10px 0 0;padding:0;font-size:12px;line-height:18px;color:inherit}
.handmade-bag-colors[aria-busy=true] .handmade-bag-colors__radio:checked+.handmade-bag-colors__tile::after{content:"";position:absolute;width:12px;height:12px;right:-3px;bottom:-3px;border:2px solid var(--handmade-color-accent);border-right-color:transparent;border-radius:50%;background:rgb(var(--color-background));animation:handmade-bag-color-loading .8s linear infinite}
@media(hover:hover){.handmade-bag-colors__option:hover .handmade-bag-colors__tile{border-color:rgb(var(--color-foreground)/.4)}.handmade-bag-colors__option:hover .handmade-bag-colors__radio:checked+.handmade-bag-colors__tile{border-color:var(--handmade-color-accent)}}
@keyframes handmade-bag-color-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.handmade-bag-colors[aria-busy=true] .handmade-bag-colors__radio:checked+.handmade-bag-colors__tile::after{animation:none}}
@media(forced-colors:active){.handmade-bag-colors__tile{border-color:ButtonText}.handmade-bag-colors__radio:checked+.handmade-bag-colors__tile,.handmade-bag-colors__tile[aria-current=true]{border-color:Highlight;outline:2px solid Highlight;outline-offset:1px}.handmade-bag-colors__radio:focus-visible+.handmade-bag-colors__tile{outline:3px solid Highlight;outline-offset:4px}}