.switch {
    --uiSwitchSize: 64px;
    --uiSwitchBgColor: var(--switchBgColor, #f1f1f1);
    --uiSwitchBgColorActive: var(--switchBgColorActive, #B02C5B);
    --uiSwitchBorderColorActive: var(--switchBorderColorActive, #B02C5B);
    --uiSwitchBorderColorFocus: gray;
    --uiSwitchButtonBgColor: var(--switchButtonBgColor, #A7194B);
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.switch-inverse {
    --uiSwitchButtonBgColor: var(--switchBgColor, #f1f1f1);
}

.switch__label {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 0px var(--uiSwitchBorderColorActive); /* ou uma cor neutra */
}

.switch__toggle {
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

    .switch__toggle:focus ~ .switch__label {
        box-shadow: 0 0 0 var(--uiSwitchThickFocus, 0px) var(--uiSwitchBorderColorFocus);
    }

    .switch__toggle:checked:focus ~ .switch__label {
        box-shadow: 0 0 0 var(--uiSwitchThickFocus, 0px) var(--uiSwitchBorderColorActive);
    }

.switch__label:before, .switch__label:after {
    content: "";
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

.switch__label:before {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--uiSwitchBgColor) !important;
}

.switch__label:after {
    top: 50%;
    z-index: 3;
    transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
}

.switch_type1 {
    --uiSwitchBorderRadius: var(--switchBorderRadius, 60px);
    width: var(--uiSwitchSize);
    height: calc((var(--uiswitchsize) / 2));
    height:32px;
    border-radius: var(--uiSwitchBorderRadius);
    background-color: var(--uiSwitchBgColorActive);
}

    .switch_type1 .switch__label {
        border-radius: var(--uiSwitchBorderRadius);
    }

        .switch_type1 .switch__label:before {
            border-radius: var(--uiSwitchBorderRadius);
            transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
            transform: scale(1);
            opacity: 1;
        }

    .switch_type1 .switch__toggle:checked ~ .switch__label:before {
        transform: scale(0);
        opacity: .7;
    }

    .switch_type1 .switch__label:after {
        width: calc(var(--uiSwitchSize) / 2);
        height: calc(var(--uiSwitchSize) / 2);
        transform: translate3d(0, -50%, 0);
        background-color: var(--uiSwitchButtonBgColor);
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    }

    .switch_type1 .switch__toggle:checked ~ .switch__label:after {
        transform: translate3d(100%, -50%, 0);
    }