/* All sidebar button presentation lives here; type describes its shape. */
chess-button { display: inline-flex; min-width: 0; vertical-align: middle; }
chess-button[hidden] { display: none !important; }
chess-button > button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px;
  padding: 8px 12px; border: 1px solid var(--button-border, #e2e8f0); border-radius: 10px;
  background: #fff; color: #475569; font: inherit; cursor: pointer;
}
chess-button[type="primary"] > button { border-color: var(--button-accent, #475569); background: var(--button-accent, #475569); color: #fff; font-weight: 600; }
chess-button[type="quiet"] > button { border-color: transparent; background: transparent; color: #64748b; }
chess-button[type="icon"] { width: 36px; height: 36px; flex: 0 0 36px; }
chess-button[type="icon"] > button { height: 100%; padding: 0; }
chess-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
chess-button[type="palette"], chess-button[type="preview"] { width: 100%; aspect-ratio: 1; }
chess-button[type="palette"] > button, chess-button[type="preview"] > button { min-height: 0; height: 100%; padding: 3px; overflow: hidden; font-size: 1.65rem; line-height: 1; }
chess-button[type="preview"] > button { padding: 0; border-width: 2px; background: transparent; }
chess-button[type="preview"] > button[aria-pressed="true"] { outline: none; border-color: var(--button-accent, var(--drawing-preview-color, #64748b)); }
chess-button[type="tab"] { flex: 1; }
chess-button[type="tab"] > button { padding: 7px 4px; font-size: .72rem; font-weight: 600; }
chess-button[type="tab"] > button[aria-selected="true"] { border-color: var(--button-accent, #94a3b8); background: var(--button-selected-bg, #e8eef5); }
chess-button[type="chip"] > button { min-height: 32px; padding: 5px 10px; font-size: .8rem; font-weight: 600; }
chess-button[type="switch"] { width: 38px; height: 22px; flex: 0 0 38px; }
chess-button[type="switch"] > button { min-height: 0; height: 100%; padding: 2px; border: 0; border-radius: 20px; background: #d1d5db; justify-content: flex-start; }
chess-button[type="switch"] > button > span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
chess-button[type="switch"] > button[aria-checked="true"] { background: var(--button-accent, #475569); }
chess-button[type="switch"] > button[aria-checked="true"] > span { transform: translateX(16px); }
chess-button > button:hover:not(:disabled) { filter: brightness(.95); }
chess-button > button:disabled { opacity: .5; cursor: default; }
chess-button > button:focus-visible { outline: 2px solid var(--button-accent, #64748b); outline-offset: 2px; }
chess-button > button[aria-pressed="true"] { outline: 2px solid var(--button-accent, #94a3b8); background: var(--button-selected-bg, #e8eef5); }

@media (prefers-reduced-motion: reduce) { chess-button[type="switch"] > button > span { transition: none; } }

chess-button[type="preview"] > button > span:not(.drawing-style-preview) { display: none; }