.Sui-Card{
    --sui-card-px: theme('sui.spacing.card.px');
    --sui-card-py: theme('sui.spacing.card.py');
    /*--sui-card-px-dense: theme('sui.spacing.card.pxDense');
    --sui-card-py-dense: theme('sui.spacing.card.pyDense');*/
    --sui-card-space: theme('sui.spacing.card.space');
    --sui-card-bg: theme('colors.sui.bg');
    --sui-card-border: theme('colors.sui.border');
    --sui-card-text: inherit;
    --sui-card-warp-space: 0.375rem;
    @apply rounded-card bg-[color:var(--sui-card-bg)] text-[color:var(--sui-card-text)];

    /*&__Content,
    &__Header,
    &__Actions{
        @apply px-[var(--sui-card-px)] py-[calc(var(--sui-card-py))];!*py-[calc(var(--sui-card-py)/2)] first:pt-[var(--sui-card-py)] last:pb-[var(--sui-card-py)];*!
    }*/

    &__Header{
        @apply flex flex-nowrap items-center space-x-[var(--sui-card-space)] rounded-t-card;
        &Text{
            @apply flex-auto flex flex-col items-start leading-tight;
            >*{
                @apply m-0;
            }
        }
        &--dim{
            @apply bg-sui-bgDim;
        }
    }

    &__Actions{
        @apply flex flex-nowrap space-x-[var(--sui-card-space)] rounded-b-card ;
        &--dim{
            @apply bg-sui-bgDim;
        }
        &--align{
            &-start {
                @apply justify-start
            }
            &-center {
                @apply justify-center
            }
            &-end {
                @apply justify-end
            }
        }
    }

    &--outlined{
        @apply border border-[color:var(--sui-card-border)];
        .Sui-Card__warpY:before{
            box-shadow: inset 0 1px 0 0px var(--sui-card-border);
        }
        .Sui-Card__warpY:after{
            box-shadow: inset 0 -1px 0 0px var(--sui-card-border);
        }
        .Sui-Card__warpX:before{
            box-shadow: inset 1px 0 0 0px var(--sui-card-border);
        }
        .Sui-Card__warpX:after{
            box-shadow: inset -1px 0 0 0px var(--sui-card-border);
        }
    }
    &--raised{
        @apply shadow-lg;
    }

    /*padding*/
    &--padding-dense{
        .Sui-Card__Content,
        .Sui-Card__Header,
        .Sui-Card__Actions{
            @apply px-[var(--sui-card-px)] py-[var(--sui-card-py)];
        }
    }
    &--padding-large{
        .Sui-Card__Content,
        .Sui-Card__Header,
        .Sui-Card__Actions{
            @apply px-7 py-7;
        }
    }


    /*rounded*/
    &--rounded-default{
        @apply rounded-card
    }
    &--rounded-none{
        @apply rounded-none
    }
    &--rounded-slim{
        @apply rounded-control
    }
    &--rounded-large{
        @apply rounded-cardLarge
    }
    &--rounded-warped{
        @apply rounded-none relative z-10;
    }
    &__warpY:before,
    &__warpY:after,
    &__warpX:before,
    &__warpX:after{
        content: " ";
        @apply block absolute bg-[color:var(--sui-card-bg)];
        border-radius: 100%;
        z-index:-1;
    }
    &__warpY:before,
    &__warpY:after{
        @apply h-[var(--sui-card-warp-space)] left-0 right-0;
    }
    &__warpY:before{
        @apply -translate-y-1/2 top-0;
    }
    &__warpY:after{
        @apply translate-y-1/2 bottom-0;
    }
    &__warpX:before,
    &__warpX:after{
        @apply w-[var(--sui-card-warp-space)] top-0 bottom-0;
    }
    &__warpX:before{
        @apply -translate-x-1/2 left-0;
    }
    &__warpX:after{
        @apply translate-x-1/2 right-0;
    }


    /**
    COLORS
    */
    &--primary{
        --sui-card-bg: theme('colors.primary.500');
        --sui-card-text: theme('colors.primary.contrast');
        &-outline{
            --sui-card-border: theme('colors.primary.500');
        }
    }
    &--secondary{
        --sui-card-bg: theme('colors.secondary.500');
        --sui-card-text: theme('colors.secondary.contrast');
        &-outline{
            --sui-card-border: theme('colors.secondary.500');
        }
    }
    &--dim{
        --sui-card-bg: theme('colors.sui.bgDim');
        --sui-btn-hover: var(--sui-btn-color);
        &-outline{
            --sui-card-border: theme('colors.sui.bgDim');
        }
    }
    &--basic{
        --sui-card-bg: theme('colors.basic.100');
        --sui-btn-hover: var(--sui-btn-color);
        &-outline{
            --sui-card-border: theme('colors.basic.100');
        }
    }
    &--info{
        --sui-card-bg: theme('colors.info.500');
        --sui-card-text: theme('colors.info.contrast');
        &-outline{
            --sui-card-border: theme('colors.info.500');
        }
    }
    &--success{
        --sui-card-bg: theme('colors.success.500');
        --sui-card-text: theme('colors.success.contrast');
        &-outline{
            --sui-card-border: theme('colors.success.500');
        }
    }
    &--warning{
        --sui-card-bg: theme('colors.warning.500');
        --sui-card-text: theme('colors.warning.contrast');
        &-outline{
            --sui-card-border: theme('colors.secondary.500');
        }
    }
    &--error{
        --sui-card-bg: theme('colors.error.500');
        --sui-card-text: theme('colors.error.contrast');
        &-outline{
            --sui-card-border: theme('colors.error.500');
        }
    }
    &--dark{
        --sui-card-bg: theme('colors.basic.600');
        --sui-card-text: theme('colors.white');
        &-outline{
            --sui-card-border: theme('colors.basic.600');
        }
    }
    &--light{
        --sui-card-bg: white;
        --sui-card-text: theme('colors.primary.500');
        &-outline{
            --sui-card-border: white;
        }
    }
}