@utility container {
    margin-inline: auto;
    padding-inline: 2rem;
}

@utility text-bg-* {
    color: --value(--color-bg-*);
}

@utility bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@utility bg-gradient-* {
    background-color: --value(--color-*);
    /*background-image: linear-gradient(to right bottom, --value(--color-*-400), --value(--color-*-700));*/
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@utility flex-space-* {
    @apply flex items-center;

    @variant rtl {
        @apply space-x-reverse;
    }
}

@utility flex-space-0 {
    @apply space-x-0;
}

@utility flex-space-1 {
    @apply space-x-1;
}

@utility flex-space-2 {
    @apply space-x-2;
}

@utility flex-space-3 {
    @apply space-x-3;
}

@utility flex-space-4 {
    @apply space-x-4;
}

@utility flex-space-5 {
    @apply space-x-5;
}

@utility flex-space-6 {
    @apply space-x-6;
}

@utility flex-space-7 {
    @apply space-x-7;
}

@utility flex-space-8 {
    @apply space-x-8;
}

@utility flex-space-9 {
    @apply space-x-9;
}

@utility flex-space-10 {
    @apply space-x-10;
}

@utility flex-space-11 {
    @apply space-x-11;
}

@utility flex-space-12 {
    @apply space-x-12;
}

@utility pill {
    border-radius: calc(infinity * 1px);
}

@utility text-xxs {
    font-size: 0.5rem;
}

@utility fade-in {
    @apply animate-fade-in;
}

@utility fade-out {
    @apply animate-fade-out;
}

@utility text-gradient {
    @apply bg-gradient-to-r bg-clip-text text-transparent;
}

@utility text-gradient-* {
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right bottom, --value(--color-*-300), --value(--color-*-700));
}

@utility text-gradient-to-l {
    @apply bg-gradient-to-l;
}

@utility text-gradient-to-tl {
    @apply bg-gradient-to-tl;
}

@utility text-gradient-to-bl {
    @apply bg-gradient-to-bl;
}

@utility text-gradient-to-r {
    @apply bg-gradient-to-r;
}

@utility text-gradient-to-tr {
    @apply bg-gradient-to-tr;
}

@utility text-gradient-to-br {
    @apply bg-gradient-to-br;
}