.colors{gap:5px;flex-wrap:wrap;margin:10px 0 24px}
.color-dot{width:36px;height:36px;flex:0 0 36px;background:transparent;position:relative}
.color-dot:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--color);box-shadow:inset 0 0 0 1px #00000012}
.color-dot[aria-pressed=true]:after{inset:4px;border-color:#606458}
.color-dot[aria-busy=true]{opacity:.55}
@media(max-width:600px){.color-dot{width:44px;height:44px;flex-basis:44px}.color-dot[aria-pressed=true]:after{inset:8px}.colors{gap:2px}}