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

    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--item-marker-size);
    block-size: var(--item-marker-size);
    border: var(--border-width-strong) solid var(--color-done);
    border-radius: var(--radius-pill);
    color: var(--color-bg);
  }

  .item-marker--completed {
    background-color: var(--color-done);
  }

  .item-marker--started {
    padding: var(--space-1);
    background: conic-gradient(var(--color-done) var(--item-started-fill), transparent var(--item-started-fill)) content-box;
  }

  .item-marker--skipped {
    border-style: dashed;
    border-color: var(--color-ink-faint);
  }

  .item-marker__form {
    display: contents;
  }

  .item-marker__control {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    margin: calc((var(--item-marker-size) - var(--tap-min)) / 2);
    padding: var(--space-0);
    border: none;
    background-color: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .item-marker__control > .item-marker {
    transition: transform var(--dur-fast) var(--ease-spring), outline-color var(--dur-fast) var(--ease-calm);
    outline: var(--border-width-strong) solid transparent;
    outline-offset: var(--space-1);
  }

  .item-marker__control:active > .item-marker {
    transform: scale(var(--press-scale));
  }

  .item-marker__form[aria-busy="true"] .item-marker__control {
    cursor: progress;
  }

  .item-marker__form[aria-busy="true"] .item-marker {
    outline-color: var(--color-done);
  }

  @media (any-hover: hover) {
    .item-marker__control:hover > .item-marker {
      outline-color: var(--color-done);
    }
  }

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

  .item-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);
    block-size: var(--check-pip-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-caution);
    outline: var(--check-pip-ring) solid var(--color-bg);
  }
}