.color-row-grid{display:grid;position:relative;grid-auto-flow:column;align-items:center;justify-content:space-between;transform:translateZ(0);border-radius:72px;background:#f1f3f7;width:100%;margin-top:14px;padding:7px 10px;contain:layout}.color-circle-border{--padding-ease: cubic-bezier(.37, 0, .63, 1);--animation-duration: .3s;display:flex;position:relative;align-items:center;justify-content:center;transition:border-color var(--animation-duration) ease,background-color var(--animation-duration) ease,padding var(--animation-duration) var(--padding-ease);border:1px solid transparent;padding:4px;border-radius:100px}.color-circle-border:hover,.color-circle-selected{border:1px solid var(--hex-color, #000)}.color-circle--white:hover,.color-circle-selected-white{border:1px solid var(--black-200)}.color-circle-selected{background:#fff}.color-circle-border:has(.color-circle-name){min-width:34px;margin-inline:-5px}.color-circle-border:is(:first-of-type,:last-of-type):has(.color-circle-name){transition:border-color var(--animation-duration) ease,background-color var(--animation-duration) ease,padding var(--animation-duration) var(--padding-ease),margin var(--animation-duration) var(--padding-ease)}.color-row-grid input[type=radio]:checked+.color-circle-border:first-of-type:has(.color-circle-name){margin-left:0}.color-row-grid input[type=radio]:checked+.color-circle-border:last-of-type:has(.color-circle-name){margin-right:0}.color-circle-border:has(.color-circle-name) .color-circle{flex-shrink:0}.color-circle-name{display:grid;grid-template-columns:0fr;min-width:0;margin-left:0;opacity:0;font-size:10px;line-height:8px;color:#000;font-family:Erbos;letter-spacing:normal;text-transform:uppercase;transition:grid-template-columns var(--animation-duration) var(--padding-ease),margin-left var(--animation-duration) var(--padding-ease),opacity var(--animation-duration) ease}.color-circle-name>span{min-width:0;overflow:hidden;padding-block:4px;margin-block:-4px;white-space:nowrap;padding-right:6px;margin-right:-6px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent)}.color-row-grid input[type=radio]:checked+.color-circle-border:has(.color-circle-name){padding-right:7px}.color-row-grid input[type=radio]:checked+.color-circle-border .color-circle-name{grid-template-columns:1fr;margin-left:6px;opacity:1}@media(prefers-reduced-motion:reduce){.color-circle-border,.color-circle-border:is(:first-of-type,:last-of-type):has(.color-circle-name),.color-circle-name{transition:none}}.color-row-grid.display{justify-content:flex-start;margin-bottom:24px}.color-row-grid.band-v1>*:nth-child(-n+6){display:none}.color-row-grid.band-v2>*:nth-child(n+8):nth-child(-n+12){display:none}.color-circle{position:relative;border-radius:50%;cursor:pointer;width:24px;height:24px;background:var(--hex-color, #000)}.color-circle.white{outline:1px solid #D3D3D3;outline-offset:-1px}.color-circle:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.6) 40%,transparent 90%);mix-blend-mode:soft-light}.color-circle--black .color-circle:before{background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.3) 40%,transparent 90%);mix-blend-mode:normal}.color-dot--red{background:var(--red-200)}.color-dot--yellow{background:var(--yellow-200)}.color-dot--mint{background:var(--mint-200)}.color-dot--green{background:var(--green-200)}.color-dot--blue{background:var(--blue-200)}.color-dot--purple{background:var(--purple-200)}.color-dot--white{background:#fff;border:1px solid #b3b3b3}.color-dot--black{background:var(--black-200)}.color-dot--latte{background:#bfa58d}.color-dot--pumpkin{background:#f37d27}.color-dot--glacier{background:#6fa0ef}.color-dot--cranberry{background:#cf2029}.color-dot--iris{background:#8f44dc}.color-dot--blossom{background:#f291b5}.color-dot--mango{background:#ffad4a}.color-dot--lagoon{background:#72d4bd}.color-dot--slate{background:#cbcdcd}.color-dot--maroon{background:#794652}.color-dot--pink{background:#ff7cae}.color-dot--pink.color-dot--bundle{background:var(--red-200)}.color-dot--sand{background:#dcbc99}.color-dot--grey{background:#919ca4}.variant-chip--red{color:#e23c4c;background:#e23c4c33}.variant-chip--red svg path{fill:#e23c4c}.variant-chip--yellow{color:var(--yellow-200);background:#ffc10533}.variant-chip--yellow svg path{fill:var(--yellow-200)}.variant-chip--mint{color:var(--mint-200);background:#76d67633}.variant-chip--mint svg path{fill:var(--mint-200)}.variant-chip--green{color:var(--green-200);background:#017e7033}.variant-chip--green svg path{fill:var(--green-200)}.variant-chip--blue{color:var(--blue-200);background:#50a9ed33}.variant-chip--blue svg path{fill:var(--blue-200)}.variant-chip--purple{color:var(--purple-200);background:#7b61ff33}.variant-chip--purple svg path{fill:var(--purple-200)}.variant-chip--white{color:#707070;background:#80808033}.variant-chip--white svg path{fill:#707070}.variant-chip--black{color:var(--black-200);background-color:#3333}.variant-chip--black svg path{fill:var(--black-200)}.variant-chip--latte{color:#bfa58d;background-color:#bfa58d33}.variant-chip--latte svg path{fill:#bfa58d}.variant-chip--pumpkin{color:#f37d27;background-color:#f37d2733}.variant-chip--pumpkin svg path{fill:#f37d27}.variant-chip--glacier{color:#6fa0ef;background-color:#71a1ef33}.variant-chip--glacier svg path{fill:#6fa0ef}.variant-chip--cranberry{color:#cf2029;background-color:#cf202926}.variant-chip--cranberry svg path{fill:#cf2029}.variant-chip--iris{color:#8f44dc;background-color:#8f44dc26}.variant-chip--iris svg path{fill:#8f44dc}.variant-chip--blossom{color:#f291b5;background-color:#f291b526}.variant-chip--blossom svg path{fill:#f291b5}.variant-chip--mango{color:#ffad4a;background-color:#ffad4a26}.variant-chip--mango svg path{fill:#ffad4a}.variant-chip--lagoon{color:#72d4bd;background-color:#72d4bd26}.variant-chip--lagoon svg path{fill:#72d4bd}.variant-chip--popular{color:#ff6a3a;background-color:#fdead8}.variant-chip--new{color:#4fa8ed;background-color:#4fa9ed33}@media screen and (max-width:1050px){.color-circle-border{border:solid 1px transparent}.color-row-grid input[type=radio]:checked+label,.color-circle-border:hover{border:solid 1px var(--hex-color, #000)}.color-row-grid input[type=radio]:checked+.color-circle--white,.color-circle--white:hover{border:solid 1px var(--black-200)}.color-circle-border.selected .color-circle{width:23px;height:23px}}@media screen and (min-width:780px){.color-circle{width:18px;height:18px}.color-circle-border:has(.color-circle-name){min-width:28px}}@media screen and (min-width:1050px){.color-circle{width:24px;height:24px}.color-circle-border:has(.color-circle-name){min-width:34px}}
/*# sourceMappingURL=/cdn/shop/t/351/assets/component-color-circle-picker.css.map */