/* The drawn elements in the DOM, reached by name (js/identity/dom.js): the buttons' component, the bonus, icons, flags and the castle. Structure only: every colour, font, radius and frame is a token. A button's frame is a token (--frame-button, --frame-bonus): none while the buttons are CSS, Pixel-art Studio's nine-slice image through border-image later; its label is live text in --font-ui. */

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* The button, its variants and states: enabled, disabled, danger, quiet */
.button { height: 48px; padding: 0 20px; border-radius: var(--radius-control); border-image: var(--frame-button); background: var(--color-surface); color: var(--color-text); font-family: var(--font-ui); font-weight: 700; }
.button--primary { background: var(--color-blue); color: var(--color-tile-text); }
.button--secondary { background: var(--color-surface); color: var(--color-text); }
.button--danger { background: var(--color-danger); color: var(--color-tile-text); }
.button--accept { background: var(--color-text); color: var(--color-text-on-colour); }
.button--quiet { height: 40px; background: none; color: var(--color-text-muted); font-weight: 600; }
.button:disabled { background: var(--color-surface); color: var(--color-disabled-text); cursor: default; }
.button__icon { margin-right: 6px; }

/* The bonuses the match has on, and a bonus in its states: enabled, active, disabled */
.bonuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bonus { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: var(--radius-control); border-image: var(--frame-bonus); background: var(--color-surface-raised); font-family: var(--font-ui); font-size: var(--font-size-s); font-weight: 600; }
.bonus__icon { color: var(--color-traced); }
.bonus__price { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.bonus--active { box-shadow: inset 0 0 0 2px var(--color-traced); }
.bonus--disabled, .bonus:disabled { background: var(--color-surface); color: var(--color-disabled-text); cursor: default; }
.bonus--disabled .bonus__icon, .bonus--disabled .bonus__price, .bonus:disabled .bonus__icon, .bonus:disabled .bonus__price { color: var(--color-disabled-text); }

/* An icon: a glyph in --font-ui until Pixel-art Studio's file replaces it */
.icon { display: inline-block; font-family: var(--font-ui); font-style: normal; line-height: 1; text-align: center; }
img.icon { width: 1em; height: 1em; image-rendering: pixelated; }
/* The capital's castle, as the DOM draws it */
.icon[data-asset="board.castle"] { color: var(--color-capital); }

/* A flag, at its registry size unless its slot sizes it */
.flag { display: inline-block; height: auto; border-radius: var(--radius-tile); }