/* Shared button presentation. variant describes emphasis; shape describes geometry. */
chess-button { display: inline-flex; min-width: 0; vertical-align: middle; }
chess-button[hidden] { display: none !important; }
chess-button-group { display: inline-flex; vertical-align: middle; }
@media (pointer: fine) { chess-button-group > chess-button { margin: 0; } }
/* Group geometry targets .icon-btn so it outranks the per-button label and shape rules in chess-controls.css. */
chess-button-group > chess-button:not(:first-child) > .icon-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
chess-button-group > chess-button:not(:last-child) > .icon-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
chess-button-group > chess-button:only-child > .icon-btn { border-radius: 10px; }
chess-button-group[shape="round"] > chess-button:first-child:not(:only-child) > .icon-btn { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
chess-button-group[shape="round"] > chess-button:last-child:not(:only-child) > .icon-btn { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
chess-button-group[shape="circle"] > chess-button > .icon-btn { border-radius: 50%; }
@media (pointer: fine) {
  chess-button-group > chess-button:not(:first-child) > .icon-btn { margin-left: -1px; }
  chess-button-group[shape="circle"] > chess-button:not(:first-child) > .icon-btn { margin-left: 4px; }
}
chess-button-group > chess-button > .icon-btn:is(:hover, :focus-visible, [aria-pressed="true"]) { position: relative; z-index: 1; }
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, var(--panel-border, #e2e8f0)); border-radius: 10px;
  background: var(--button-default-bg, #fff); color: var(--button-default-color, var(--ink, #475569)); font: inherit; cursor: pointer;
}
/* Editor sidebar types keep their panel presentation after sharing .icon-btn
   with game controls. Low specificity preserves the type and drawing overrides. */
:where(.position-sidebar-stack) chess-button[type] { display: inline-flex; }
:where(.position-sidebar-stack) :where(chess-button[type]) > .icon-btn {
  --icon-btn-bg: #fff;
  --icon-btn-bg-hover: #fff;
  --icon-fg: #475569;
  width: 100%; height: var(--icon-btn-size); min-height: 36px; padding: 8px 12px;
  border: 1px solid var(--button-border, #e2e8f0); border-radius: 10px;
  background: #fff; color: #475569; box-shadow: none; font: inherit;
}
:where(.position-sidebar-stack) :where(chess-button[type]) > .icon-btn > svg { width: 20px; height: 20px; stroke: currentColor; }
chess-button[shape="round"] > button { border-radius: 999px; }
chess-button[shape="circle"] { width: 36px; height: 36px; flex: 0 0 36px; }
chess-button[shape="circle"] > button { width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 50%; }
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="link"] > button { border-color: transparent; background: transparent; color: var(--button-accent, #475569); text-decoration: underline; text-underline-offset: 3px; }
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; 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; }
chess-button-group > chess-button > button[aria-pressed="true"] { position: relative; z-index: 1; outline-offset: -2px; }

/* Host pseudo-elements escape palette/preview buttons' clipped contents.
   Ancestor containers must allow overflow where tooltips extend beyond them. */
@media (hover: hover) {
  /* Supplying a tooltip must not move absolutely positioned controls into flow. */
  :where(chess-button[data-tooltip]:not([data-tooltip=""])) { position: relative; }
  chess-button[data-tooltip]:not([data-tooltip=""]) { overflow: visible; }
  chess-button[data-tooltip]:not([data-tooltip=""])::before,
  chess-button[data-tooltip]:not([data-tooltip=""])::after {
    position: absolute; z-index: 10; pointer-events: none; opacity: 0;
    transition: opacity .15s ease-in-out;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  }
  chess-button[data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip); width: max-content; max-width: min(240px, calc(100vw - 24px));
    box-sizing: border-box; padding: 6px 10px; border-radius: 6px;
    background: var(--ink, #334155); color: #fff; font: 400 12px/1.4 sans-serif;
    text-align: center; white-space: normal; overflow-wrap: anywhere;
  }
  chess-button[data-tooltip]:not([data-tooltip=""])::after {
    content: ''; bottom: 100%; border: 6px solid transparent; border-bottom: 0;
    border-top-color: var(--ink, #334155);
  }
  chess-button[data-tooltip][data-placement="bottom"]::before,
  chess-button[data-tooltip][data-placement="bottom"]::after { top: calc(100% + 6px); bottom: auto; }
  chess-button[data-tooltip][data-placement="bottom"]::after { top: 100%; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink, #334155); }
  chess-button[data-tooltip][data-placement="right"]::before,
  chess-button[data-tooltip][data-placement="right"]::after { top: 50%; bottom: auto; left: calc(100% + 6px); transform: translateY(-50%); }
  chess-button[data-tooltip][data-placement="right"]::after { left: 100%; border: 6px solid transparent; border-left: 0; border-right-color: var(--ink, #334155); }
  chess-button[data-tooltip][data-placement="left"]::before,
  chess-button[data-tooltip][data-placement="left"]::after { top: 50%; bottom: auto; right: calc(100% + 6px); left: auto; transform: translateY(-50%); }
  chess-button[data-tooltip][data-placement="left"]::after { right: 100%; border: 6px solid transparent; border-right: 0; border-left-color: var(--ink, #334155); }
  chess-button[data-tooltip]:has(> button:is(:hover, :focus-visible))::before,
  chess-button[data-tooltip]:has(> button:is(:hover, :focus-visible))::after { opacity: 1; }
  @supports not (position-area: top) {
    chess-button[data-tooltip]:has(> button:is(:hover, :focus-visible)) { z-index: 10; }
  }
  /* Anchored to the button in the viewport, so a bubble never clips against or scrolls an ancestor's
     overflow. Each button is its own anchor; data-placement picks the side, like the arrow. */
  @supports (position-area: top) {
    chess-button[data-tooltip]:not([data-tooltip=""]) { anchor-name: --chess-tip; anchor-scope: --chess-tip; }
    chess-button[data-tooltip]:not([data-tooltip=""])::before,
    chess-button[data-tooltip]:not([data-tooltip=""])::after {
      position: fixed; z-index: 100; position-anchor: --chess-tip; position-try-fallbacks: none;
      inset: auto; transform: none; margin: 0;
      position-area: top; justify-self: anchor-center; align-self: unsafe end;
    }
    chess-button[data-tooltip]:not([data-tooltip=""])::before { margin-bottom: 6px; }
    chess-button[data-tooltip][data-placement="bottom"]::before,
    chess-button[data-tooltip][data-placement="bottom"]::after { position-area: bottom; align-self: unsafe start; }
    chess-button[data-tooltip][data-placement="bottom"]::before { margin: 6px 0 0; }
    chess-button[data-tooltip][data-placement="left"]::before,
    chess-button[data-tooltip][data-placement="left"]::after { position-area: left; align-self: anchor-center; justify-self: unsafe end; }
    chess-button[data-tooltip][data-placement="left"]::before { margin: 0 6px 0 0; }
    chess-button[data-tooltip][data-placement="right"]::before,
    chess-button[data-tooltip][data-placement="right"]::after { position-area: right; align-self: anchor-center; justify-self: unsafe start; }
    chess-button[data-tooltip][data-placement="right"]::before { margin: 0 0 0 6px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  chess-button[data-tooltip]:not([data-tooltip=""])::before,
  chess-button[data-tooltip]:not([data-tooltip=""])::after { transition: none; }
}