* {
    background-color: var(--bg-color);
    color: var(--primary-color-1);
}

/* hiding the default input so we can override its appearance */
.switch-checkbox > input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-checkbox::before {
    background-color: var(--bg-color-2);
    content: "";
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;

    border: 3px solid var(--primary-color-2);
}