.ek-content-switcher-wrapper{
    .ek-cs-content-container{
        .ek-cs-content-section{
            &:not(.active){
                @apply hidden;
            }
        }
    }

    .ek-cs-switch-wrapper{
        .ek-cs-switch{
            @apply font-bold text-[16px];
            .ek-cs-toggle-switch:checked {
                + .ek-cs-slider{
                    @apply bg-[#3147FF] before:left-[calc(100%-28px)];
                }

            }
            &.active{
                @apply text-ekl-brand;
                .ek-cs-icon-wrapper{
                    i,
                    svg{
                        @apply text-ekl-brand
                    }
                    svg{
                        @apply fill-ekl-brand;
                    }
                }
            }
        }
        &.ek-css-round-2{

            .ek-cs-slider{
                @apply before:h-[20px] before:w-[20px] before:-left-[3px] before:bg-[#3147FF] bg-[#AAC7F9];
            }
            .ek-cs-toggle-switch:checked{
                + .ek-cs-slider{
                    @apply before:left-[calc(100%-18px)] bg-[#AAC7F9];
                }
            }
        }
        &.ek-css-round-2,
        &.ek-css-square-2{
            .ek-input-label{
                @apply h-[12px] w-[45px];
            }
        }
        &.ek-css-square{
            .ek-input-label{
                @apply h-[30px] w-[60px] top-[1px];
            }
        }
        &.ek-css-square-2,
        &.ek-css-square{
            .ek-cs-slider{
                @apply rounded-none before:rounded-none before:h-[22px] before:w-[22px] before:top-[49%];
            }
            .ek-cs-toggle-switch:checked{
                + .ek-cs-slider{
                    @apply before:left-[calc(100%-25px)];
                }
            }

        }
        &.ek-css-square-2{
            .ek-cs-slider{
                @apply before:bg-[#3147FF] bg-[#AAC7F9] before:-left-[3px];
            }
            .ek-cs-toggle-switch:checked{
                + .ek-cs-slider{
                    @apply bg-[#AAC7F9] before:left-[calc(100%-18px)];
                }
            }
        }
        &.ek-css-button{
            @apply bg-white flex rounded-[50px] shadow-[0_0_10px_rgba(0,0,0,0.5)];

            .ek-cs-button{
                @apply text-ekl-text bg-size-[201%_103%] bg-[right_bottom] border-none inline-flex items-center gap-[5px] py-[10px] px-[30px] font-bold text-[15px] rounded-[50px] cursor-pointer bg-transparent hover:bg-transparent;
                &.active{
                    @apply text-white bg-linear-to-r from-[#3147FF] to-[#fff] from-50% to-50%  bg-[left_bottom] transition-all duration-[.4s] ease-in-out;
                    .ek-cs-icon-wrapper{
                        i,
                        svg{
                            @apply text-white;
                        }

                        svg{
                            @apply fill-white;
                        }
                    }

                }
            }
        }

        .ek-cs-icon-right{
            @apply flex-row-reverse;
        }
    }
    &.ek-cs-design-button{
        .ek-cs-switch-container {
            @apply text-center;
        }
    }

    .ek-cs-switch{
        @apply flex items-center gap-[5px];
    }

    .ek-cs-icon-wrapper{
        i,
        svg{
            @apply w-[1em] h-[1em];
        }
    }
}