.swatch-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));grid-gap:1rem}.swatch{background:var(--screen);border:.5px solid var(--ui-border);border-radius:4px;box-shadow:0 4px var(--screen-shade),0 4.5px var(--ui-border);padding:1px}.swatch:before{content:"";display:block;padding-bottom:100%;position:relative}.swatch:after{background:var(--ui-border);border-radius:0 0 4px 4px;bottom:-4px;content:"";height:3px;left:.5px;position:absolute;right:.5px;top:auto;z-index:1;--pin:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' width='2' height='2' patternTransform='rotate(45)' patternUnits='userSpaceOnUse' viewBox='0 0 2 2'%3E%3Cpath fill='%23E1DACB' d='M0-.5v1h2v-1z'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");-webkit-mask-image:var(--pin);mask-image:var(--pin)}.swatch:active{box-shadow:0 1px var(--screen-shade),0 1.5px var(--ui-border);transform:translateY(3px)}.swatch:active:after{height:0}.swatch.selected{box-shadow:none;outline:1px dashed var(--focus);outline-offset:1px;transform:translateY(4px)}.swatch.selected:after{height:0}.swatch-content{border-radius:3px;bottom:1px;left:1px;overflow:hidden;position:absolute;right:1px;top:1px}.swatch.selected:focus-within,.swatch:focus-within{outline:2px solid var(--focus);outline-offset:2px}.swatch input[type=radio]:focus{outline:none}