/* icon-button.css: Icon button (component 2). Owner: group A (P2.T4). Tokens only, logical properties only. */

[data-component="icon-button"] {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  min-inline-size: var(--size-target-min);
  min-block-size: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
[data-component="icon-button"][data-variant="secondary"] { border: var(--border-width) solid var(--border-control); background: var(--surface); }
[data-component="icon-button"]:hover { text-decoration: none; }

[data-component="icon-button"]:hover:not(:disabled, [aria-disabled="true"]),
[data-component="icon-button"][data-force="hover"]:not(:disabled, [aria-disabled="true"]) { background: var(--surface-hover); }
[data-component="icon-button"]:active:not(:disabled, [aria-disabled="true"]),
[data-component="icon-button"][data-force="active"]:not(:disabled, [aria-disabled="true"]) { background: var(--border); }
[data-component="icon-button"][data-force="focus-visible"] {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}

/* Toggled (aria-pressed): brand-subtle background, brand icon. */
[data-component="icon-button"][aria-pressed="true"],
[data-component="icon-button"][aria-pressed="true"]:hover:not(:disabled, [aria-disabled="true"]) { background: var(--brand-subtle); color: var(--brand); }

[data-component="icon-button"]:disabled,
[data-component="icon-button"][aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Badge: the Count badge primitive (count-badge.css draws it); this places it on the inline-end block-start corner. */
[data-component="icon-button"] .icon-button__badge {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-2));
  inset-inline-end: calc(-1 * var(--space-2));
  pointer-events: none;
}

@media (width < 768px) and (pointer: coarse) {
  [data-component="icon-button"] { inline-size: var(--size-control-touch); block-size: var(--size-control-touch); }
}