.dark-checkbox {
    display: flex;
    padding: 0.35em 0;
    cursor: pointer;

    .__checkmark-container {
        display: flex;
        background-color: $color-control-dark-background;
        border-radius: $border-radius-control;
        transition: background-color $visual-transition;
    }
    &:hover .__checkmark-container {
        background-color: $color-control-dark-hover;
    }
    &:active .__checkmark-container {
        background-color: $color-control-dark-active;
    }

    .__checkmark {
        stroke-dasharray: 15;
        stroke-dashoffset: 15;
        stroke: $color-control-dark-foreground;
        stroke-width: 2px;
        fill: none;
        transition: stroke-dashoffset $visual-transition;
    }

    &.--checked {

        & .__checkmark {
            stroke-dashoffset: 0;
        }

        & .__checkmark-container {
            background-color: $color-primary;
        }
        
    }

}