/*
 * A SQUARE means CHOSEN, a CIRCLE means FINISHED. The fill is `--primary` with its ground's own
 * ink, so a themed app gets a branded mark. Both shapes share the 24px leading gutter; the square's
 * radius sits one step in (the full rung reads as a lozenge) and the ring's 1.5px edge is its own
 * measure.
 */
@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 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;
  }

  /* 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);
  }

  /* Transparent ground: it fills with a growing disc, clipped to this edge. */
  .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" darkens the edge; the half-fill alone was too quiet. */
  .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 inner disc's left half, 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 box's mixed mark: a bar in the tick's ink. The ring half-fills instead. */
  .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 regardless of 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);
  }
}