/* The register row: hover, open, ticked and press, one neutral step apart (§2.3); a brand tint would make
   "open" mean "themed". `marked` shares the open ground, the checkbox telling them apart, since a row can
   be both. The wash bleeds out (equal negative margin and padding) so content stays on the container's
   edge. The tile, on the page ground, marks selection as an edge and hover/press/focus as a ring, both
   `box-shadow` so the box never moves. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-pressable-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 12, the register's column gutter. */
    gap: var(--lotics-space-12);
    flex-shrink: 0;
    min-width: 0;
    /* The door is an absolutely-positioned sibling and the content lifts above it. */
    position: relative;
    isolation: isolate;
    background-color: transparent;
    /* A register row is a button around data. */
    cursor: auto;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-pressable-row[data-variant="register"] {
    border-radius: var(--lotics-radius-control);
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  /* Square and full-bleed for a grid drawing its own rules. */
  .lotics-pressable-row[data-variant="bleed"] {
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  /* Softer corners so a row nested in a padded container reads as its own object. */
  .lotics-pressable-row[data-variant="inset"] {
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
  }

  .lotics-pressable-row:not([data-variant="card"]):hover {
    background-color: var(--lotics-wash-hover);
  }
  .lotics-pressable-row:not([data-variant="card"])[data-selected],
  .lotics-pressable-row:not([data-variant="card"])[data-marked] {
    background-color: var(--lotics-wash-selected);
  }
  .lotics-pressable-row:not([data-variant="card"]):active {
    background-color: var(--lotics-wash-press);
  }

  .lotics-pressable-row[data-variant="card"] {
    flex-direction: column;
    align-items: stretch;
    text-align: start;
    gap: 0;
    padding: var(--lotics-space-16);
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    appearance: none;
    /* A `<button>`, so the UA face is stated: §5 rule 1. */
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-default);
    /* A picker tile sets a value; the pointer is for what acts. */
    cursor: default;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* A card holding controls is a record read on its tile, not a tile picked: its words select as a row's
     do. */
  .lotics-pressable-row[data-variant="card"][data-controls] {
    cursor: auto;
    user-select: auto;
  }

  .lotics-pressable-row[data-variant="card"][data-selected],
  .lotics-pressable-row[data-variant="card"][data-marked] {
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
  }

  .lotics-pressable-row[data-variant="card"]:hover,
  .lotics-pressable-row[data-variant="card"]:active {
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--ring);
  }

  /* An outline of the same width and colour, flush with the border, so hover and focus draw one edge. */
  .lotics-pressable-row[data-variant="card"]:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }
}