/*
 * THE ICON-ONLY ACTION — a disc, so the radius is full at every rung.
 *
 * Only the two GROUND-LESS variants wash under the pointer, and they take the
 * control pair rather than the row pair: a glyph-only control rides rows more
 * often than it stands alone, and a row hovers to the row rung, so the generic
 * one would paint the same grey on the same grey exactly when the pointer is on
 * it. The filled variants carry their own colour and do not move — a disc that
 * IS the primary has nowhere quieter to go.
 *
 * The press area is larger than the disc wherever the disc is smaller than the
 * control height, so a 28 or a 24 still answers a 40px touch. It is a
 * pseudo-element rather than padding: air inside the box would grow the disc,
 * and air outside it would shift every neighbour.
 *
 * The disc's MEASURE is one fact — `--lotics-icon-button-size` — and the press
 * area is derived from it, so a component that wears the disc as its own part
 * (`NumberInput`'s 32px stepper) restates one length and the touch target follows.
 * That default and the edge it draws are stated at ZERO specificity, because a
 * part class is one class and `[data-size]` is a class plus an attribute: as a
 * plain rule the rung outranks the composer, and the stepper came out 28px with
 * nothing to see but four missing pixels.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* The two the composer restates. `md` is the base: a rung says otherwise. */
  :where(.lotics-icon-button) {
    --lotics-icon-button-size: var(--lotics-control-content-height);
    border: 0 solid var(--border);
  }
  :where(.lotics-icon-button[data-size="lg"]) {
    --lotics-icon-button-size: var(--lotics-control-height);
  }
  :where(.lotics-icon-button[data-size="sm"]) {
    --lotics-icon-button-size: 24px;
  }

  .lotics-icon-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: var(--lotics-icon-button-size);
    height: var(--lotics-icon-button-size);
    border-radius: var(--lotics-radius-full);
    background-color: transparent;
    /* §5 rule 1 — the UA's button font reaches anything a glyph is swapped for. */
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    color: var(--lotics-ink-default);
    --lotics-icon-color: currentColor;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-icon-button:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* The 40px touch target, whatever the disc measures — at `lg` the disc already
     IS the target and the inset comes out zero. */
  .lotics-icon-button::after {
    content: "";
    position: absolute;
    inset: calc((var(--lotics-control-height) - var(--lotics-icon-button-size)) / -2);
  }

  /* ─── Grounds and ink ─────────────────────────────────────────────────── */

  .lotics-icon-button[data-variant="primary"] {
    background-color: var(--primary);
    color: var(--lotics-ink-on-inverse);
  }
  .lotics-icon-button[data-variant="secondary"] {
    background-color: var(--secondary);
    color: var(--lotics-ink-default);
  }
  .lotics-icon-button[data-variant="muted"] {
    color: var(--lotics-ink-muted);
  }
  .lotics-icon-button[data-tone="danger"] {
    color: var(--lotics-ink-danger);
  }
  .lotics-icon-button[data-variant="tonal"][data-tone="danger"] {
    background-color: var(--lotics-wash-danger);
  }
  .lotics-icon-button[data-variant="white"] {
    color: var(--lotics-white);
  }

  .lotics-icon-button[data-elevated] {
    background-color: var(--card);
    box-shadow: var(--lotics-shadow-raised);
  }

  /* ─── Hover and press ─────────────────────────────────────────────────── */

  .lotics-icon-button[data-variant="ghost"]:not([data-disabled]):hover,
  .lotics-icon-button[data-variant="white"]:not([data-disabled]):hover {
    background-color: var(--lotics-wash-control-hover);
  }
  .lotics-icon-button[data-variant="ghost"]:not([data-disabled]):active,
  .lotics-icon-button[data-variant="white"]:not([data-disabled]):active {
    background-color: var(--lotics-wash-control-press);
  }

  /* A ghost that carries a valence washes on the row ladder, one rung quieter —
     its ink already says what it does. */
  .lotics-icon-button[data-variant="muted"]:not([data-disabled]):hover,
  .lotics-icon-button[data-variant="ghost"][data-tone="danger"]:not([data-disabled]):hover {
    background-color: var(--lotics-wash-selected);
  }
  .lotics-icon-button[data-variant="muted"]:not([data-disabled]):active,
  .lotics-icon-button[data-variant="ghost"][data-tone="danger"]:not([data-disabled]):active {
    background-color: var(--lotics-wash-press);
  }

  /* An elevated disc floats OVER content, so it keeps its own ground under the
     pointer: the wash arrives as an image layered on the card fill, where a
     `background-color` would replace the fill and let the feed read through. */
  .lotics-icon-button[data-elevated]:not([data-disabled]):hover {
    background-color: var(--card);
    background-image: linear-gradient(
      0deg,
      var(--lotics-wash-control-hover),
      var(--lotics-wash-control-hover)
    );
  }
  .lotics-icon-button[data-elevated]:not([data-disabled]):active {
    background-color: var(--card);
    background-image: linear-gradient(
      0deg,
      var(--lotics-wash-control-press),
      var(--lotics-wash-control-press)
    );
  }

  .lotics-icon-button[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
    cursor: default;
  }
}