/*
 * THE ICON-ONLY ACTION — a disc, full radius at every rung. Only the groundless variants wash, on
 * the control pair, since the row pair matches the row's own hover; a destructive disc turns solid,
 * as `Button`'s act does. The press area is a pseudo-element reaching 40px, so neither disc nor
 * neighbours move. The disc's size is one property the touch target derives from, stated at zero
 * specificity so a composing part (`NumberInput`'s stepper) can restate it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* `md` is the base; a rung overrides. */
  :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 a swapped glyph. */
    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;
  }

  /* At `lg` the disc is the target, so the inset is zero. */
  .lotics-icon-button::after {
    content: "";
    position: absolute;
    inset: calc((var(--lotics-control-height) - var(--lotics-icon-button-size)) / -2);
  }

  .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);
  }

  .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 muted disc washes a rung quieter; it says less. */
  .lotics-icon-button[data-variant="muted"]:not([data-disabled]):hover {
    background-color: var(--lotics-wash-selected);
  }
  .lotics-icon-button[data-variant="muted"]:not([data-disabled]):active {
    background-color: var(--lotics-wash-press);
  }

  /* The wash layers over the card fill, which a `background-color` would replace. */
  .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)
    );
  }

  /* Solid under its own ink when pointed at, a rung deeper pressed. */
  .lotics-icon-button[data-tone="danger"]:not([data-disabled]):hover {
    background-color: var(--destructive);
    background-image: none;
    color: var(--destructive-foreground);
  }
  .lotics-icon-button[data-tone="danger"]:not([data-disabled]):active {
    background-color: color-mix(
      in srgb,
      var(--lotics-shadow-color) var(--lotics-on-solid-press),
      var(--destructive)
    );
    background-image: none;
    color: var(--destructive-foreground);
  }

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