.Sui-Switch{
    --sui-box-size: theme('sui.control.normal.toggleHeight');
    --sui-box-border: theme('colors.sui.border');
    --sui-box-bg: theme('colors.sui.border');
    --sui-box-color: theme('colors.primary.500');
    --sui-box-handle: theme('colors.sui.bg');
    --sui-box-text: theme('colors.sui.textDim');
    --sui-box-handle-size: calc(var(--sui-box-size) - 4px);
    --sui-input-margin: theme('sui.spacing.control.margin');
    --sui-label-color: inherit;
    --sui-helper-color: theme('colors.sui.textDim');
    @apply flex flex-nowrap my-[var(--sui-input-margin)];
    &__Box{
        @apply relative overflow-hidden inline-flex flex-nowrap flex-col justify-start items-center cursor-pointer
        p-[1px]
        min-w-[calc(var(--sui-box-size)*2)]  h-[var(--sui-box-size)]
        bg-[color:var(--sui-box-bg)] border border-[color:var(--sui-box-border)]
        ring-0 ring-inset ring-[color:var(--sui-box-color)]
        text-[color:var(--sui-box-color)]
        rounded-full transition ease-out duration-200;
        &Text{
            @apply flex-none h-full flex justify-center items-center w-full text-xs uppercase leading-none text-center font-bold whitespace-nowrap
                px-1
            text-[color:var(--sui-box-text)] leading-[var(--sui-box-handle-size)] transition ease-in-out duration-300 delay-75;
            .Sui-Icon{
                /*@apply w-[var(--sui-box-handle-size)] h-[var(--sui-box-handle-size)] inline-block;*/
                @apply w-auto h-[90%] inline-block;
            }
            &--on{
                @apply pr-[var(--sui-box-size)] opacity-0 -translate-x-full text-[color:var(--sui-box-handle)];
            }
            &--off{
                @apply pl-[var(--sui-box-size)] -translate-y-full translate-x-0;
            }
        }
        &Handle{
            @apply rounded-full absolute inset-px right-auto
                w-[var(--sui-box-handle-size)] h-[var(--sui-box-handle-size)]
                bg-[color:var(--sui-box-handle)];
            animation-name: switchHandleAnimationOff;
            animation-timing-function: ease-in-out;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;

        }
    }
    >input{
        @apply hidden absolute -z-10;
        &:checked + .Sui-Switch__Box{
            @apply border-[color:var(--sui-box-color)] bg-[color:var(--sui-box-color)];
            >.Sui-Icon{
                @apply scale-100 rotate-0 opacity-100;
            }
            .Sui-Switch__BoxText--on{
                @apply opacity-100 translate-x-0;
            }
            .Sui-Switch__BoxText--off{
                @apply opacity-0 translate-x-full;
            }
            .Sui-Switch__BoxHandle{
                @apply right-px left-auto;
                animation-name: switchHandleAnimationOn;
            }
        }
        &:disabled + .Sui-Switch__Box{
            @apply opacity-50 cursor-not-allowed;
        }
    }
    &__Text{
        @apply ml-2 mb-0 text-[color:var(--sui-input-text)] leading-[var(--sui-box-size)];
    }


    /**
    COLORS
    */
    &--basic{
        --sui-box-color: theme('colors.basic.500');
    }
    &--primary{
        --sui-box-color: theme('colors.primary.500');
    }
    &--secondary{
        --sui-box-color: theme('colors.secondary.500');
    }
    &--warning{
        --sui-box-color: theme('colors.warning.500');
    }
    &--info{
        --sui-box-color: theme('colors.info.500');
    }
    &--error{
        --sui-box-color: theme('colors.error.500');
    }
    &--success{
        --sui-box-color: theme('colors.success.500');
    }
    &--hasError{
        --sui-label-color: theme('colors.error.500');
        --sui-helper-color: theme('colors.error.500');
    }
    &--hasSuccess{
        --sui-label-color: theme('colors.success.500');
        --sui-helper-color: theme('colors.success.500');
    }

    &--dark{
        --sui-box-color: theme('colors.basic.900');
    }
    &--light{
        --sui-box-bg: theme('colors.light.500');
        --sui-box-border: theme('colors.light.500');
        --sui-box-color: theme('colors.light.500');
        --sui-box-handle: theme('colors.primary.500');
        --sui-input-text: theme('colors.light.500');
    }

    /* Margin */
    &--marginNormal{
        --sui-input-margin: theme('sui.spacing.control.margin');
    }
    &--marginDense{
        --sui-input-margin: theme('sui.spacing.control.marginDense');
    }
    &--marginNone{
        --sui-input-margin: 0;
    }

    /* Size */
    &--slim{
        --sui-box-size: theme('sui.control.slim.toggleHeight');
        .Sui-Switch__BoxText{
            @apply text-xs;
        }
    }
    &--normal{
        --sui-box-size: theme('sui.control.normal.toggleHeight');
    }
    &--large{
        --sui-box-size: theme('sui.control.large.toggleHeight');
    }

    &__HelperText {
        @apply flex flex-nowrap text-xs font-medium leading-none mt-1 text-[color:var(--sui-helper-color)];
    }
}

@keyframes switchHandleAnimationOn {
    0%{
        @apply right-auto left-px w-[var(--sui-box-handle-size)];
    }
    50%{
        @apply right-auto left-px w-full;
    }
    51%{
        @apply right-px left-auto w-full;
    }
    100%{
        @apply right-px left-auto w-[var(--sui-box-handle-size)];
    }
}
@keyframes switchHandleAnimationOff {
    0%{
        @apply right-px left-auto w-[var(--sui-box-handle-size)];
    }
    50%{
        @apply right-px left-auto w-full;
    }
    51%{
        @apply right-auto left-px w-full;
    }
    100%{
        @apply right-auto left-px w-[var(--sui-box-handle-size)];
    }
}