@include wrap-class() {
    .wcc-toggle {
        display: inline-flex;
        @extend %align-center;
        position: relative;
        margin-bottom: 0;
        .wcc-toggle-text {
            margin: 0 5px;
            font-weight: $font--medium;
        }
        .wcc-toggle-icon {
            &.wcc-toggle-icon-ticked{
                left:1px;
            }
            &.wcc-toggle-icon-crossed{
                right:1px;
            }
            color: #fff;
            width: 16px;
            height: 16px;
            position: absolute;
            top:2px;
            svg {
                overflow: hidden;
                pointer-events: none;
                max-width: 100%;
                max-height: 100%;
                vertical-align: bottom;
            }
        }
        
        
        input {
            display: none;
            &:focus {
                ~ .wcc-toggle-slider {
                    box-shadow: 0 0 0 5px palette(toggle, base);
                }
            }

            &:checked {
                ~ .wcc-toggle-slider {
                    background-color: color(toggle, checked);

                    &:before {
                        left: calc(100% - 2px);
                        transform: translateX(-100%);
                    }
                }
            }

            &[disabled] {
                ~ .wcc-toggle-slider {
                    cursor: not-allowed;
                    opacity: 0.5;
                    background-color: color(toggle, base);

                    &:before {
                        background-color: lighten(color(toggle, base), 100%);
                    }

                    &:hover {
                        box-shadow: none;
                    }
                }
            }
        }

        .wcc-toggle-slider {
            width: $toggle-width;
            height: $toggle-height;
            float: left;
            display: block;
            position: relative;
            margin: #{calc(($toggle-font-height - $toggle-height) / 2)} 0;
            border: 0;
            border-radius: #{calc($toggle-height / 2)};
            background-color: color(toggle, base);
            transition: $transition;
            padding-left: 2px;
            padding-right: 2px;
            &:before {
                content: " ";
                width: #{$toggle-height - 4px};
                height: #{$toggle-height - 4px};
                position: absolute;
                top: 2px;
                left: 2px;
                border-radius: $toggle-height;
                background-color: color(mono, white);
                transition: 0.2s linear;
            }

            &:hover {
                box-shadow: 0 0 0 5px palette(silver, default);
            }
        }
        &.wcc-toggle-alt {
            .wcc-toggle-slider {
                height: 20px;
                border-radius: 15px;
                min-width: 90px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                &:before {
                    width: 14px;
                    height: 14px;
                    transition: 0.4s linear;
                }
                &:after {
                    content: " ";
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    top: 4.5px;
                    right: 6px;
                    -webkit-mask-image: url("~@/assets/close.svg");
                    mask-image: url("~@/assets/close.svg");
                    background-color: #fff;
                    -webkit-mask-size: 100%;
                    mask-size: 100%;
                    -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                    mask-position: center;
                }
            }
            input {
                &:checked {
                    ~ .wcc-toggle-slider {
                        background-color: $color-primary;
                        color: #ffffff;
                        &:after {
                            -webkit-mask-image: url("~@/assets/tick.svg");
                            mask-image: url("~@/assets/tick.svg");
                            left: 6px;
                        }
                    }
                }
            }
        }
    }
}