/*
 * IconButton — shared look for every icon-only button (arch 09 §4 + §5).
 * Square, sized by the control scale in tokens.css.
 */

.iconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.sm {
  width: 24px;
  height: 24px;
}

.lg {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
}

.iconButton:hover:not(:disabled) {
  background: var(--control-hover-fill, var(--layer-01));
  color: var(--text);
}

/* An open disclosure trigger (gear popovers, export menu) holds the fill. */
.iconButton[aria-expanded='true'] {
  background: var(--layer-02);
  color: var(--text);
}

.iconButton:disabled {
  cursor: default;
  opacity: 0.45;
}
