/*
 * THE PRESS OF A DATUM THAT NARROWS THE PAGE. The whole datum is the one target, and it acts on its own, so
 * it takes the pointer. Its hover and press are a standalone control's rungs (theming.md §2.3: its pressed
 * state is ink, never a ground), laid as an image over whatever ground the datum stands on — a pivot's
 * heat keeps its colour. Pressed, its words take the accent an applied filter wears; the others stay as
 * they are.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* A real button with its user agent's paint taken off, at no specificity: the datum's own sheet sets its
     ground, shape and inset over it, in whatever order the sheets arrive. */
  :where(.lotics-datum-toggle) {
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    background-image: none;
    font-family: var(--font-sans);
    color: inherit;
    text-align: start;
    appearance: none;
  }

  .lotics-datum-toggle {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
  }

  .lotics-datum-toggle:hover {
    background-image: linear-gradient(0deg, var(--lotics-wash-selected), var(--lotics-wash-selected));
  }

  .lotics-datum-toggle:active {
    background-image: linear-gradient(0deg, var(--lotics-wash-press), var(--lotics-wash-press));
  }

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

  .lotics-datum-toggle[data-pressed] {
    --lotics-ink-default: var(--lotics-accent);
    --lotics-ink-muted: var(--lotics-accent);
  }
}