.switch, .switch-inverse {
   --uiSwitchSize: 64px;
   --uiSwitchBgColor: var(--main-bg-color-strong);
   --uiSwitchBgColorActive: var(--main-bg-color-smotly);
   --uiSwitchBorderColorActive: var(--main-bg-color-smotly);
   --uiSwitchBorderColorFocus: gray;
   --uiSwitchButtonBgColor: var(--switchButtonBgColor, #360568);
   display: inline-block;
   position: relative;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
}
   .switch.switch-inverse {
      background-color: var(--main-bg-color) !important;
   }

.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(--main-bg-color-smotly);
}

    .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 {
      font-family: "Font Awesome 6 Free"; /* fonte do FA */
      font-weight: 900; /* sólido */
      content: "\f165"; /* thumbs-down */
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--uiSwitchSize) / 2);
      height: calc(var(--uiSwitchSize) / 2);
      transform: translate3d(0, -50%, 0);
      background-color: var(--main-bg-color);
      border-radius: 100%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
      color: var(--main-font-color);
      font-size: 16px;
   }

    .switch_type1 .switch__toggle:checked ~ .switch__label:after {
        transform: translate3d(calc(100% - 0%), -50%, 0);
        content: "\f164"; /* thumbs-up */
    }

/* estado disabled */
.switch__toggle:disabled ~ .switch__label {
    cursor: not-allowed;
    opacity: 0.5; /* deixa mais claro que está desativado */
    box-shadow: none;
}

    .switch__toggle:disabled ~ .switch__label:after {
        background-color: #ccc; /* cor neutra para o botão */
        color: #666; /* ícone mais apagado */
        box-shadow: none;
    }