.button {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  height: var(--row-height);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  text-align: left;
}

.button[data-look='row'] {
  width: 100%;
  padding-inline: var(--row-inset);
}

.button[data-look='icon'] {
  justify-content: center;
  width: var(--row-height);
}

.button[data-look='action'],
.button[data-look='primary'] {
  justify-content: center;
  padding-inline: var(--space-5);
  background-color: var(--color-raised);
  color: var(--color-text);
}

/* The main action of a form differs by a STEP of surface, not by colour: there are no green "save"
   buttons in this interface (prompt §4.2). ⚠ That is exactly why it is NOT --color-selected here:
   since S3.6 that is the blue colour of the selected row, and the button would become coloured
   against the rule. */
.button[data-look='primary'] {
  background-color: var(--color-raised-strong);
}

/* The only place where the muted tone stands UNDER TEXT, and this is not a caveat of the token's
   contract but its named exception: WCAG 1.4.3 exempts a disabled element from the threshold, and
   dimming is exactly what "cannot be pressed" is. The caveat lives next to the token itself
   (tokens.css). */
.button[data-disabled] {
  background-color: var(--color-panel);
  color: var(--color-text-muted);
  cursor: default;
}

.button[data-hovered] {
  background-color: var(--color-raised);
  color: var(--color-text);
}

/* Focus is visible only from the keyboard: a mouse click on a button must not leave a ring. */
.button[data-focus-visible] {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}