@layer lotek {
  .lt-checkbox {
    /* The design system cannot assume the consumer has a CSS reset. */
    box-sizing: border-box;

    appearance: none;
    flex: none;
    display: inline-block;
    inline-size: var(--lt-checkbox-size, var(--lt-spacing-5));
    block-size: var(--lt-checkbox-size, var(--lt-spacing-5));
    margin: 0;
    background-color: var(--lt-color-neutral-canvas);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    border: 1px solid var(--lt-color-neutral-border);
    border-radius: var(--lt-checkbox-radius, var(--lt-spacing-1));
    cursor: pointer;
  }

  /* Without `:not(:disabled)`. It raised the specificity above the states
     below, so the mouse removed both the error border and the border of a
     checked box. The rules for checked, disabled and invalid come after
     this one and win on order. */
  .lt-checkbox:hover {
    border-color: var(--lt-color-neutral-border-strong);
  }

  .lt-checkbox:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-checkbox:checked,
  .lt-checkbox:indeterminate {
    background-color: var(--lt-color-accent-fill);
    border-color: var(--lt-color-accent-fill);
  }

  /* The tick is a token and not an image in this file, because a data URL
     cannot read a CSS variable. The stroke is painted into the image, and
     must therefore flip with the theme where the other colours flip. */
  .lt-checkbox:checked {
    background-image: var(--lt-icon-check);
  }

  .lt-checkbox:indeterminate {
    background-image: var(--lt-icon-dash);
  }

  .lt-checkbox:disabled {
    background-color: var(--lt-color-disabled-surface);
    border-color: var(--lt-color-disabled-surface);
    cursor: not-allowed;
  }

  .lt-checkbox:disabled:checked,
  .lt-checkbox:disabled:indeterminate {
    background-color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-text);
  }

  .lt-checkbox[data-state="invalid"] {
    border-color: var(--lt-color-danger-text);
  }

  .lt-checkbox[data-state="invalid"]:focus-visible {
    outline-color: var(--lt-color-danger-text);
  }

  .lt-checkbox[data-state="success"] {
    border-color: var(--lt-color-success-text);
  }

  /* Disabled wins over a state. `[data-state]` used to come after
     `:disabled` with the same specificity, and an invalid field in a form
     that was disabled during submission looked red, not disabled. */
  .lt-checkbox:disabled[data-state] {
    background-color: var(--lt-color-disabled-surface);
    border-color: var(--lt-color-disabled-surface);
  }

  .lt-checkbox:disabled:is(:checked, :indeterminate)[data-state] {
    background-color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-text);
  }

  /* The box and the text on one line, with the text in place over several lines. */
  .lt-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--lt-spacing-2);
    line-height: var(--lt-line-height-default);
  }

  /*
   * High contrast: let the browser draw the box itself.
   *
   * Tested in the mode: gradients and box-shadow are removed, custom colours
   * are overridden, and only system colours, borders, masks and data URL
   * images survive. Our tick is white and painted into the image, so it
   * would have become invisible against the forced surface. The browser's
   * own checkbox is correct in every theme the user can choose, and costs
   * us nothing to fall back on.
   */
  @media (forced-colors: active) {
    .lt-checkbox,
    .lt-checkbox:checked,
    .lt-checkbox:indeterminate {
      appearance: auto;
      background-image: none;
    }
  }
}