Toggle switch

                @use "../abstracts/css-util";

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 3.2rem;
    height: 2rem;

    input {
        opacity: 0;
        width: 0;
        height: 0;

        &:checked {
            &+ .toggle-switch-slider {
                background-color: css-util.get-var(toggle-switch,checked,background);

                &:before {
                    -webkit-transform: translateX(12px);
                    -ms-transform: translateX(12px);
                    transform: translateX(12px);
                }
            }
        }

        &:disabled {
            background-color: css-util.get-var(toggle-switch,disabled,background);

            &+ .toggle-switch-slider {
                background-color: css-util.get-var(toggle-switch,disabled,background);
            }

            &:checked {
                &+ .toggle-switch-slider {
                    background-color: css-util.get-var(toggle-switch,checked,disabled,background);
                }
            }
        }
    }

    &-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #d2d2d2;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: css-util.get-var(toggle-switch,radius);

        &:before {
            position: absolute;
            content: "";
            height: 1.6rem;
            width: 1.6rem;
            left: 0.2rem;
            bottom: 0.2rem;
            background-color: white;
            -webkit-transition: .3s;
            transition: .3s;
            border-radius: css-util.get-var(toggle-switch,radius);
          }
      }
}