/* Icon button: .ui-icon-button [--filled | --accent | --success | --danger | --close] [--sm]. Needs an accessible name
   (aria-label). Visual size --icon-button-size (36 px on fine pointers, 44 px on touch).
   --close is the house X (C1): looks like every other icon button (same colour, weight and size),
   so a row of header actions reads as one set. A <span class="ui-icon-divider"> before it sets the
   close button apart from the tools (app headers, history drawer, quick-access sheet).
   A count badge can sit inside: <span class="ui-badge ui-badge--count">3</span>. */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer components {
  .ui-icon-button {
    --_bg: transparent;
    --_bg-hover: var(--color-bg-hover);
    --_bg-active: var(--color-bg-active);
    --_fg: var(--color-text-secondary);
    --_fg-hover: var(--color-text);

    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .ui-icon-button > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .ui-icon-button--sm {
    --icon-button-size: 32px;
    border-radius: var(--radius-md);
  }

  .ui-icon-button--sm > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  @media (pointer: coarse) {
    .ui-icon-button--sm {
      --icon-button-size: 44px;
    }
  }

  .ui-icon-button--filled {
    --_bg: var(--color-bg-hover);
    --_bg-hover: var(--color-bg-active);
    --_fg: var(--color-text);
  }

  /* Confirming action (e.g. "done" of an edit mode): the theme's solid success colour, white glyph. */
  .ui-icon-button.ui-icon-button--success,
  .ui-icon-button.ui-icon-button--success[aria-pressed="true"] {
    --_bg: var(--color-success);
    --_bg-hover: color-mix(in srgb, var(--color-success) 85%, var(--color-text));
    --_fg: var(--color-on-status);
    --_fg-hover: var(--color-on-status);
    background: var(--_bg);
    color: var(--_fg);
  }

  /* Cancelling action (e.g. the X of an edit mode, which discards the changes): red glyph, no fill. */
  .ui-icon-button.ui-icon-button--danger {
    --_fg: var(--color-danger-text);
    --_fg-hover: var(--color-danger-text);
    --_bg-hover: var(--color-danger-soft);
    color: var(--_fg);
  }

  .ui-icon-button--accent {
    --_bg: var(--color-accent);
    --_bg-hover: var(--color-accent-hover);
    --_bg-active: var(--color-accent-active);
    --_fg: var(--color-on-accent);
    --_fg-hover: var(--color-on-accent);
    border-radius: var(--radius-round);
  }

  @media (hover: hover) {
    .ui-icon-button:hover:not(:disabled, [aria-disabled="true"]) {
      background: var(--_bg-hover);
      color: var(--_fg-hover);
    }
  }

  .ui-icon-button.is-hovered {
    background: var(--_bg-hover);
    color: var(--_fg-hover);
  }

  .ui-icon-button:active:not(:disabled, [aria-disabled="true"]),
  .ui-icon-button.is-pressed {
    background: var(--_bg-active);
    color: var(--_fg-hover);
  }

  .ui-icon-button[aria-pressed="true"],
  .ui-icon-button.is-selected {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
  }

  .ui-icon-button.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .ui-icon-button:disabled,
  .ui-icon-button[aria-disabled="true"] {
    --_fg: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .ui-icon-button--accent:disabled,
  .ui-icon-button--accent[aria-disabled="true"] {
    --_bg: var(--color-bg-disabled);
  }

  .ui-icon-button.is-loading > svg {
    visibility: hidden;
  }

  .ui-icon-button.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-round);
    animation: ui-spin var(--duration-spin) linear infinite;
  }

  .ui-icon-button > .ui-badge--count {
    position: absolute;
    top: 2px;
    right: 2px;
  }

  .ui-icon-divider {
    flex: none;
    width: var(--border-width);
    height: 22px;
    margin-inline: var(--space-1);
    background: var(--color-border-strong);
  }
}