/*
 * A button that is only an icon — notify, rename, delete, open the drawer.
 * The glyph stays small; the hit area is 32px on a mouse and 44px on touch.
 * Its accessible name is the `sr-only` text inside it, always.
 *
 *   .icon-button--danger   turns the glyph to the loss colour on hover
 */
@layer components {
  .icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast);

    & .icon {
      fill: var(--color-ink-subtle);
      transition: fill var(--duration-fast);
    }

    &:hover {
      background-color: var(--color-surface-raised);

      & .icon {
        fill: var(--color-accent-strong);
      }
    }

    @media (pointer: coarse) {
      inline-size: var(--target-min);
      block-size: var(--target-min);
    }
  }

  .icon-button--danger:hover .icon {
    fill: var(--color-loss);
  }

  /* A state the glyph carries — the bell of a screen that notifies. */
  .icon-button--on .icon {
    fill: var(--color-accent);
  }
}