@layer components {
    :root {
        --whodunit-tick-ring: var(--opaque-separator);
        --whodunit-tick-face: var(--tertiary-system-background);
        --whodunit-tick-number: var(--secondary-label);
        --whodunit-tick-used: var(--tint);
        --whodunit-tick-used-mark: var(--tint-label);
        --whodunit-tick-hover: var(--tint);
        --whodunit-tick-focus: var(--tint);
    }

    .whodunit-tick {
        block-size: 2.75rem;
        display: inline-grid;
        flex: none;
        inline-size: 2.75rem;
        place-items: center;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;

        &::before {
            background-color: var(--whodunit-tick-face);
            block-size: 1.75rem;
            border: 0.09375rem solid var(--whodunit-tick-ring);
            border-radius: 50%;
            box-sizing: border-box;
            content: "";
            grid-area: 1 / 1;
            inline-size: 1.75rem;
            transition:
                background-color 160ms,
                border-color 160ms,
                scale 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        &:hover::before {
            border-color: var(--whodunit-tick-hover);
        }

        &:active::before {
            scale: 0.88;
        }

        &:focus-visible {
            outline: none;
        }

        &:focus-visible::before {
            outline: 0.1875rem solid var(--whodunit-tick-focus);
            outline-offset: 0.125rem;
        }

        &.whodunit-tick--used::before {
            background-color: var(--whodunit-tick-used);
            border-color: var(--whodunit-tick-used);
        }
    }

    .whodunit-tick__number {
        color: var(--whodunit-tick-number);
        font-size: var(--font-size-footnote);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        grid-area: 1 / 1;
        line-height: 1;
    }

    .whodunit-tick__check {
        block-size: 1.125rem;
        display: none;
        fill: none;
        grid-area: 1 / 1;
        inline-size: 1.125rem;
        stroke: var(--whodunit-tick-used-mark);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 3;
    }

    .whodunit-tick--used {
        & .whodunit-tick__number {
            display: none;
        }

        & .whodunit-tick__check {
            display: block;
        }
    }
}