@layer components {
  .todo-marker {
    --icon-size: var(--todo-check-size);

    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--todo-marker-size);
    block-size: var(--todo-marker-size);
    border: var(--border-width-strong) solid var(--color-accent);
    border-radius: var(--radius-xs);
    color: var(--color-ink-on-accent);
  }

  .todo-marker--completed {
    border-color: var(--color-border-strong);
    color: var(--color-ink-faint);
  }

  .todo-marker__form {
    display: contents;
  }

  .todo-marker--control {
    position: relative;
    z-index: 1;
    align-self: start;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    margin-block: calc(var(--space-1) + (var(--todo-marker-size) - var(--tap-min)) / 2) calc((var(--todo-marker-size) - var(--tap-min)) / 2);
    margin-inline: calc((var(--todo-marker-size) - var(--tap-min)) / 2);
    padding: var(--space-0);
    border: none;
    background-color: transparent;
    color: var(--color-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .todo-marker--control::before {
    content: "";
    grid-area: 1 / 1;
    inline-size: var(--todo-marker-size);
    block-size: var(--todo-marker-size);
    box-sizing: border-box;
    border: var(--border-width-strong) solid var(--color-accent);
    border-radius: var(--radius-xs);
    transition: background-color var(--dur-fast) var(--ease-calm);
  }

  .todo-marker--control > .icon {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-calm);
  }

  .todo-marker--control.todo-marker--completed {
    background-color: transparent;
    color: var(--color-ink-faint);
  }

  .todo-marker--control.todo-marker--completed::before {
    border-color: var(--color-border-strong);
  }

  .todo-marker--control.todo-marker--completed > .icon,
  .todo-marker--control[aria-busy="true"] > .icon,
  .todo-marker--control:disabled > .icon {
    opacity: 1;
  }

  @media (any-hover: hover) {
    .todo-marker--control:hover > .icon {
      opacity: 1;
    }
  }

  .todo-marker--check {
    position: relative;
  }

  .todo-marker--check::after {
    content: "";
    position: absolute;
    inset-block-start: var(--check-pip-offset);
    inset-inline-end: var(--check-pip-offset);
    inline-size: var(--check-pip-size-small);
    block-size: var(--check-pip-size-small);
    border-radius: var(--radius-pill);
    background-color: var(--color-caution);
    outline: var(--check-pip-ring) solid var(--color-bg);
  }

  .todo-marker--control.todo-marker--check::after {
    inset-block-start: calc((var(--tap-min) - var(--todo-marker-size)) / 2 + var(--check-pip-offset));
    inset-inline-end: calc((var(--tap-min) - var(--todo-marker-size)) / 2 + var(--check-pip-offset));
  }
}