.swatchy-element{margin:-4px 0;padding:12px;background:#f8f9fa;border-radius:4px;box-shadow:0 3px 3px rgba(0,0,0,0.5);position:absolute;z-index:99}.swatchy-swatches{display:grid;grid-template-columns:repeat(11, 24px);justify-items:center;grid-gap:8px 2px}.swatchy-color-button{width:24px;height:24px;border:none}.swatchy-color-button{cursor:pointer}.swatchy-display{margin:4px;height:48px;max-width:48px;border-radius:8px;border:none}.swatchy-button{--button_radius: 0.75em;--button_color: #e8e8e8;--button_outline_color: #000000;font-size:17px;font-weight:bold;border:none;border-radius:var(--button_radius);background:var(--button_outline_color);padding:0}.swatchy-button-top{display:block;box-sizing:border-box;border:2px solid var(--button_outline_color);border-radius:var(--button_radius);padding:0.75em 1.5em;background:var(--button_color);color:var(--button_outline_color);transform:translateY(-0.2em);transition:transform 0.1s ease}.swatchy-button:hover .swatchy-button-top{transform:translateY(-0.33em)}.swatchy-button:active .swatchy-button-top{transform:translateY(0)}