.switch[type="checkbox"] + label::before, .switch[type="checkbox"] + label::before
{
    background: var(--secondary-light);
}

.switch[type="checkbox"]:checked + label::before, .switch[type="checkbox"]:checked + label::before 
{
    background: linear-gradient(var(--button-primary1) , var(--button-primary2));
    border: .1rem solid var(--button-border);
}

.switch[type="checkbox"].is-rounded + label::after, .switch[type="checkbox"].is-rounded + label::after 
{
    background-image: url( '../images/close-icon.svg');
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
}

.switch[type="checkbox"]:checked.is-rounded + label::after, .switch[type="checkbox"]:checked.is-rounded + label::after 
{
    background-image: url( '../images/check-mark-icon.svg');
}

.switch[type="checkbox"] + label::after, .switch[type="checkbox"] + label::after
{
    top: calc(50% - 1.25rem * .5);
    left: 0.1rem;
    width: 1.25rem;
    height: 1.25rem;
}