.checkbox {
    --color: var(--checkbox-color, var(--c-text-primary));
    --color-focus: var(--checkbox-color-focus, var(--c-primary-focus));
    --color-accent: var(--checkbox-color-accent, var(--c-text-primary-accent));
    --stroke: var(--checkbox-stroke, var(--c-background-primary));
    --stroke-width: var(--checkbox-stroke-width, 5);
    --border-radius: var(--checkbox-border-radius, 50em);
    --border-width: var(--checkbox-border-width, 2px);
    --size: var(--checkbox-size, 1em);

    @include size(var(--size));
    @include hover_effect(--color, border-color);
    @include focus_border(--color-focus);
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    border: var(--border-width) solid var(--color);
    border-radius: var(--border-radius);

    > svg {
        @include size(70%);
        @include position(0, 0, 0, 0);
        margin: auto;
        position: absolute;
        fill: transparent;
        stroke: transparent;
        stroke-width: var(--stroke-width);
        stroke-linecap: round;
        stroke-dasharray: 54;
        stroke-dashoffset: 54;
        transition: all 0.3s;
    }
}

.checked {
    @include hover_effect(--color, background, border-color);

    > svg {
        stroke: var(--stroke);
        stroke-dashoffset: 0;
    }
}
