/*
 * Checkboxes — the single reusable `.checkbox` primitive.
 *
 * Every <input type="checkbox"> in the app should carry this class.
 * Never restyle a checkbox inside a feature stylesheet — if the token
 * needs a variant, add it here so the look stays consistent across
 * forms, filters, confirmations, and settings.
 *
 * Consumers own layout only (e.g. flex gap between the input and its
 * label text). The visual token — size, border, checkmark, focus ring,
 * disabled state — always lives in this file.
 *
 * Inspired by fizzy's checkbox pattern, adapted to Finances_app tokens.
 */

@layer components {
  .checkbox {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
  }

  .checkbox::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    background: var(--color-white);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: center;
    transition: transform 120ms ease-in-out;
  }

  .checkbox:hover {
    border-color: var(--color-primary);
  }

  .checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .checkbox:checked::before {
    transform: scale(1);
  }

  .checkbox:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }

  .checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}