.color-choice{position:relative;display:grid;min-width:44px;min-height:0;place-items:center;padding:3px;border:1px solid transparent;border-radius:11px;background:#faf8f4;cursor:pointer;transition:border-color .15s ease,background .15s ease}.color-choice:hover{background:#fff}.color-choice.active{border-color:#c6657ca6;background:#fff}.color-choice.active:after{position:absolute;top:5px;right:5px;display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:var(--accent-dark);color:#fff;content:"✓";font-size:var(--type-micro)}.color-group-marker{position:relative;display:block;width:48px;height:31px;pointer-events:none}.color-group-marker>span{position:absolute;top:4px;width:23px;height:23px;border-radius:50%;opacity:.9;mix-blend-mode:multiply}.color-group-marker>span:nth-child(1){left:1px;background:var(--tone-1)}.color-group-marker>span:nth-child(2){left:12px;background:var(--tone-2)}.color-group-marker>span:nth-child(3){left:23px;background:var(--tone-3)}@media(max-width:900px){.color-choice{min-height:50px;border-radius:9px}.color-group-marker{width:31px;transform:scale(.75);transform-origin:center}.color-choice.active:after{top:4px;right:4px;width:13px;height:13px}}@media(max-width:560px){.color-choice{min-height:44px;padding:0}.color-group-marker{transform:scale(.64)}}