.color-picker{border:none;padding:0;margin:0;width:100%;max-width:300px}.color-picker__label{font-size:14px;color:var(--color-text);margin-bottom:var(--size-sm)}.color-picker__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--size-sm)}.color-picker__swatch{width:100%;aspect-ratio:1;border:var(--border-pixel) solid var(--color-bg);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;padding:0;image-rendering:pixelated;transition:transform .1s ease}.color-picker__swatch:hover{transform:scale(1.1)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.color-picker__swatch--active{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-text)}.color-picker__check{font-size:16px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;line-height:1}