/*
 * A SQUARE means CHOSEN, a CIRCLE means FINISHED. The fill is `--primary` — the
 * same claim the one filled button makes — so a themed app gets a branded mark
 * for free, and the glyph on it takes that ground's own ink rather than a fixed
 * white.
 *
 * The 24px box is the component's own measure, and both shapes take it: a ring
 * and a box are two forms of one act, and they share the leading gutter on
 * `Table`, `Checklist` and a `Stepper`'s spine. The square's radius is the
 * control rung one space step in, because the full rung on a 24px square reads
 * as a lozenge; the ring's 1.5px edge is its own measure, because a hairline
 * disappears at 24px and 2px reads as a control already doing something.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-checkbox {
    --lotics-checkbox-fill: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-style: solid;
    background-image: none;
    appearance: none;
    /* A checkbox SETS A VALUE; the pointer is reserved for what acts. */
    cursor: default;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

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

  /* One treatment everywhere: opacity down, never a second colour. */
  .lotics-checkbox[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
  }

  .lotics-checkbox[data-shape="box"] {
    border-width: 1px;
    border-color: var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-4));
    background: var(--card);
  }

  .lotics-checkbox[data-shape="box"][data-filled] {
    background: var(--lotics-checkbox-fill);
  }

  /* THE RING. Its disc and its glyph are positioned against this box, so the
     edge it carries is the curve they are clipped to, and the ground stays
     transparent — it fills with a disc that GROWS, not with a background. */
  .lotics-checkbox[data-shape="ring"] {
    position: relative;
    border-width: 1.5px;
    border-color: var(--input);
    border-radius: var(--lotics-radius-full);
    background: transparent;
  }

  /* Anything past "none" is ENGAGED, so the edge darkens — the half-fill alone
     was too quiet to catch in a column. */
  .lotics-checkbox[data-shape="ring"][data-filled] {
    border-color: var(--lotics-checkbox-fill);
  }

  .lotics-checkbox[data-shape="ring"]:not([data-static]):not([data-filled]):hover {
    border-color: var(--lotics-border-hover);
  }

  .lotics-checkbox__half {
    position: absolute;
    inset: 0;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-checkbox-fill);
    /* The left half of the inner disc, so its curve IS the ring's. */
    clip-path: inset(0 50% 0 0);
  }

  .lotics-checkbox__fill {
    position: absolute;
    inset: 0;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-checkbox-fill);
    opacity: 0;
    transform: scale(0);
    transition:
      opacity var(--lotics-duration-base) var(--lotics-ease-standard),
      transform var(--lotics-duration-base) var(--lotics-ease-standard);
  }

  .lotics-checkbox__fill[data-checked] {
    opacity: 1;
    transform: scale(1);
  }

  .lotics-checkbox__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* The mixed state IS the box's mark: a bar the width of the tick, in the same
     ink. A ring says the same thing with the half-fill, and keeps its glyph. */
  .lotics-checkbox[data-shape="box"] .lotics-checkbox__mark[data-indeterminate] {
    width: 14px;
    height: 2px;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-ink-on-inverse);
  }

  /* POSITIONED, so the glyph paints over the disc: an absolutely-positioned
     sibling outranks in-flow content whatever the document order. */
  .lotics-checkbox[data-shape="ring"] .lotics-checkbox__mark {
    position: relative;
    opacity: 0;
    transform: scale(0);
    transition:
      opacity var(--lotics-duration-base) var(--lotics-ease-standard),
      transform var(--lotics-duration-base) var(--lotics-ease-standard);
  }

  .lotics-checkbox[data-shape="ring"] .lotics-checkbox__mark[data-checked] {
    opacity: 1;
    transform: scale(1);
  }
}