.Sui-Button {
    --sui-btn-color: theme('colors.basic.100');
    --sui-btn-color-dark: theme('colors.basic.200');
    --sui-btn-color-darker: theme('colors.basic.300');
    --sui-btn-color-light: theme('colors.basic.50');
    --sui-btn-color-lighter: theme('colors.basic.50');
    --sui-btn-color-alt: theme('colors.basic.alt');
    /*--sui-btn-color-ripple: var(--sui-btn-color-alt);*/
    --sui-btn-color-hover: var(--sui-btn-color-dark);
    --sui-btn-color-outline: theme('colors.basic.600');
    --sui-btn-color-overlay: theme('colors.basic.500 / 10%');
    --sui-btn-color-overlay-dark: theme('colors.basic.500 / 20%');
    --sui-btn-text: theme('colors.basic.600');
    --sui-btn-border: var(--sui-btn-color);
    --sui-btn-hover: var(--sui-btn-color);
    --sui-btn-height: theme('sui.control.normal.height');
    --sui-btn-px: theme('sui.control.normal.px');
    --sui-btn-py: theme('sui.control.normal.py');
    --sui-btn-radius: theme('sui.radius.control');
    @apply inline-flex flex-nowrap items-center justify-center text-sm font-medium leading-none transition-colors transition-opacity transition-shadow ease-in-out duration-300
        shadow-none outline-none no-underline
        disabled:opacity-50 disabled:cursor-not-allowed
        border border-[color:var(--sui-btn-border)]
    bg-[color:var(--sui-btn-color)] text-[color:var(--sui-btn-text)] hover:bg-[color:var(--sui-btn-color-hover)] focus:ring-2 focus:ring-[color:var(--sui-btn-color-overlay-dark)]
    h-[var(--sui-btn-height)] px-[var(--sui-btn-px)] py-[var(--sui-btn-py)]
    rounded-[var(--sui-btn-radius)]
    active:scale-95;

    /**
    ICONS
    */
    .Sui-Icon, .Sui-CircularProgress {
        @apply w-5 h-5;
        /*@apply mx-1 first:ml-0 last:mr-0*/
    }
    &__startIcon {
        @apply mr-1 ltr:mr-0 ltr:ml-1;
    }
    &__endIcon {
        @apply ml-1 ltr:ml-0 ltr:mr-1;
    }

    /**
    SIZES
     */
    &--slim{
         --sui-btn-height: theme('sui.control.slim.height');
         --sui-btn-px: theme('sui.control.slim.px');
         --sui-btn-py: theme('sui.control.slim.py');
         @apply text-xs;
        .Sui-Icon, .Sui-CircularProgress {
            @apply w-3 h-3;
        }
    }
    &--normal{
         --sui-btn-height: theme('sui.control.normal.height');
         --sui-btn-px: theme('sui.control.normal.px');
         --sui-btn-py: theme('sui.control.normal.py');
         @apply text-sm;
    }
    &--large{
         --sui-btn-height: theme('sui.control.large.height');
         --sui-btn-px: theme('sui.control.large.px');
         --sui-btn-py: theme('sui.control.large.py');
         @apply text-sm;
        .Sui-Icon, .Sui-CircularProgress {
            @apply w-6 h-6;
        }
    }

    /**
    ROUNDED
    */
    &--rounded{
         --sui-btn-radius: theme('sui.radius.control');
    }
    &--pill{
         --sui-btn-radius: theme('sui.radius.full');
    }
    &--square{
         --sui-btn-radius: 0px;
    }

    /**
    FULL WIDTH
    */
    &--fullWidth{
         @apply w-full text-center
    }

    /**
    COLORS
    */
    &--primary{
        --sui-btn-color: theme('colors.primary.500');
        --sui-btn-color-dark: theme('colors.primary.600');
        --sui-btn-color-light: theme('colors.primary.400');
        --sui-btn-color-lighter: theme('colors.primary.200');
        --sui-btn-color-alt: theme('colors.primary.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.primary.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.primary.500 / 20%');
        --sui-btn-text: theme('colors.primary.contrast');
    }
    &--secondary{
        --sui-btn-color: theme('colors.secondary.500');
        --sui-btn-color-dark: theme('colors.secondary.600');
        --sui-btn-color-light: theme('colors.secondary.400');
        --sui-btn-color-lighter: theme('colors.secondary.200');
        --sui-btn-color-alt: theme('colors.secondary.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.secondary.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.secondary.500 / 20%');
        --sui-btn-text: theme('colors.secondary.contrast');
    }
    &--basic{
        --sui-btn-color: theme('colors.basic.100');
        --sui-btn-color-dark: theme('colors.basic.200');
        --sui-btn-color-darker: theme('colors.basic.300');
        --sui-btn-color-light: theme('colors.basic.50');
        --sui-btn-color-lighter: theme('colors.basic.50');
        --sui-btn-color-alt: theme('colors.basic.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: theme('colors.basic.600');
        --sui-btn-color-overlay: theme('colors.basic.200 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.basic.200 / 20%');
        --sui-btn-text: theme('colors.basic.900');
        --sui-btn-border: var(--sui-btn-color);
        --sui-btn-hover: var(--sui-btn-color);
    }
    &--info{
        --sui-btn-color: theme('colors.info.500');
        --sui-btn-color-dark: theme('colors.info.600');
        --sui-btn-color-light: theme('colors.info.400');
        --sui-btn-color-lighter: theme('colors.info.200');
        --sui-btn-color-alt: theme('colors.info.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.info.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.info.500 / 20%');
        --sui-btn-text: theme('colors.info.contrast');
    }
    &--success{
        --sui-btn-color: theme('colors.success.500');
        --sui-btn-color-dark: theme('colors.success.600');
        --sui-btn-color-light: theme('colors.success.400');
        --sui-btn-color-lighter: theme('colors.success.200');
        --sui-btn-color-alt: theme('colors.success.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.success.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.success.500 / 20%');
        --sui-btn-text: theme('colors.success.contrast');
    }
    &--warning{
        --sui-btn-color: theme('colors.warning.500');
        --sui-btn-color-dark: theme('colors.warning.600');
        --sui-btn-color-light: theme('colors.warning.400');
        --sui-btn-color-lighter: theme('colors.warning.200');
        --sui-btn-color-alt: theme('colors.warning.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.warning.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.warning.500 / 20%');
        --sui-btn-text: theme('colors.warning.contrast');
    }
    &--error{
        --sui-btn-color: theme('colors.error.500');
        --sui-btn-color-dark: theme('colors.error.600');
        --sui-btn-color-light: theme('colors.error.400');
        --sui-btn-color-lighter: theme('colors.error.200');
        --sui-btn-color-alt: theme('colors.error.alt');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.error.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.error.500 / 20%');
        --sui-btn-text: theme('colors.error.contrast');
    }
    &--dark{
        --sui-btn-color: theme('colors.basic.600');
        --sui-btn-color-dark: theme('colors.basic.900');
        --sui-btn-color-light: theme('colors.basic.700');
        --sui-btn-color-lighter: theme('colors.basic.200');
        --sui-btn-color-alt: theme('colors.basic.900');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.basic.500 / 10%');
        --sui-btn-color-overlay-dark: theme('colors.basic.500 / 20%');
        --sui-btn-text: theme('colors.white');
    }
    &--light{
        --sui-btn-color: white;
        --sui-btn-color-dark: theme('colors.basic.100');
        --sui-btn-color-light: white;
        --sui-btn-color-lighter: white;
        --sui-btn-color-alt: theme('colors.basic.200');
        --sui-btn-color-hover: var(--sui-btn-color-dark);
        --sui-btn-color-outline: var(--sui-btn-color);
        --sui-btn-color-overlay: theme('colors.white / 10%');
        --sui-btn-color-overlay-dark: theme('colors.white / 20%');
        --sui-btn-text: theme('colors.primary.500');
    }


    /**
    VARIATIONS
    */
    &--gradiant{
        @apply bg-gradient-to-br from-[var(--sui-btn-color)] via-[var(--sui-btn-color)] to-[var(--sui-btn-color-alt)]
        hover:to-[var(--sui-btn-color)]
    }
    &--outline{
        @apply bg-transparent hover:bg-[color:var(--sui-btn-color-overlay)] hover:bg-opacity-30 border border-[color:var(--sui-btn-color-outline)] text-[color:var(--sui-btn-color-outline)]
    }
    &--ghost{
        @apply bg-[color:var(--sui-btn-color-overlay)] border-transparent text-[color:var(--sui-btn-color-outline)] hover:bg-[color:var(--sui-btn-color-overlay-dark)]
    }
    &--text{
        @apply bg-transparent border-transparent text-[color:var(--sui-btn-color-outline)] hover:bg-[color:var(--sui-btn-color-overlay)]
    }
    &--link{
        @apply bg-transparent hover:bg-transparent border-none px-0 py-0 h-auto
        text-[color:var(--sui-btn-color-outline)] hover:text-[color:var(--sui-btn-color-outline)]
        underline underline-offset-2 hover:underline-offset-4 focus:ring-0;
        .Sui-ButtonBase__Ripple{
            @apply hidden;
        }
    }

    /**
    LOADING
    */
    &--loading{
        @apply cursor-progress
    }

    /**
    EFFECT
    */
    &__Effect{
        @apply block absolute inset-0 z-0 opacity-0 blur-md; /*transition-opacity ease-in-out duration-1000;*/
        transition: opacity 1s ease-in-out, background-position .2s ease-out;
        background-size: 200% 200%;
        /*background-image: radial-gradient(circle at center,
            var(--sui-btn-color-light) 0%,
            var(--sui-btn-color-light) 27.5%,
            !*var(--sui-btn-color) 40%,*!
            var(--sui-btn-color) 57.5%,
            var(--sui-btn-color) 75%,
            var(--sui-btn-color) 100%
        );*/
         /*background-image: radial-gradient(circle at center,
         var(--sui-btn-color-light) 0%,
         var(--sui-btn-color-light) 27.5%,
         transparent 57.5%,
         transparent 75%,
         transparent 100%
         );*/
         background-image: radial-gradient(circle at center,
         var(--sui-btn-color-alt) 0%,
         var(--sui-btn-color-alt) 27.5%,
         /*transparent 40%,*/
         transparent 57.5%,
         transparent 75%,
         transparent 100%
         );
         /*background-image: radial-gradient(circle at center,
             rgba(255,255,255,0.2) 0%,
             rgba(255,255,255,0.15) 27.5%,
             !*rgba(255,255,255,0.1) 40%,*!
             rgba(255,255,255,0.05) 57.5%,
             rgba(255,255,255,0) 75%,
             rgba(255,255,255,0) 100%
         );*/
        /*background-image: radial-gradient(circle at center,
            rgba(0,0,0,0.25) 0%,
            rgba(0,0,0,0.2) 27.5%,
            rgba(0,0,0,0.15) 40%,
            rgba(0,0,0,0.1) 57.5%,
            rgba(0,0,0,0) 75%,
            rgba(0,0,0,0) 100%
        );*/
        /*background-image: radial-gradient(circle at center,
            currentColor 0%,
            currentColor 27.5%,
            transparent 57.5%,
            transparent 75%,
            transparent 100%
        );*/
    }
    &--gradiant{
        .Sui-Button__Effect{
            background-position: 0% center;
            /*@apply opacity-20;*/
            @apply opacity-100;
        }
    }
    &--hasEffect{
         @apply overflow-hidden relative hover:bg-[color:var(--sui-btn-color)];
        > * {
            @apply z-10;
        }
        &:hover .Sui-Button__Effect{
            background-position: calc((100 - var(--mouse-x, 0)) * 1%) calc((100 - var(--mouse-y, 0)) * 1%);
            /*@apply opacity-20;*/
            @apply opacity-100;
        }
    }
}