@layer components {
  .check {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin: -6px 0 -6px -10px;
    padding: 0;
    border: 0;
    background: none;
    color: transparent;
    cursor: pointer;

    &::before {
      content: "";
      grid-area: 1 / 1;
      width: 22px;
      height: 22px;
      border: 2px solid var(--line);
      border-radius: 999px;
    }

    & .icon { grid-area: 1 / 1; width: 14px; height: 14px; }
    &[aria-pressed="true"] { color: var(--on-accent); }
    &[aria-pressed="true"]::before { border-color: var(--accent); background: var(--accent); }
  }

  .menu-row:has(.check[aria-pressed="true"]) .menu-row__text { color: var(--ink-muted); text-decoration: line-through; }
}