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

@layer components {
    .toast-container {
        @apply fixed z-50;
        @apply top-4 end-4;

        &.top-start {
            @apply end-auto top-4 start-4;
        }

        &.top-center {
            @apply end-auto top-4 start-1/2 -translate-x-1/2;
        }

        &.bottom-start {
            @apply top-auto end-auto bottom-4 start-4;
        }

        &.bottom-center {
            @apply top-auto end-auto bottom-4 start-1/2 -translate-x-1/2;
        }

        &.bottom-end {
            @apply top-auto bottom-4 end-4;
        }

        &.center-center {
            @apply top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2;
        }
    }

    .toast {
        @apply flex-space-2 p-2.5 mb-3 text-sm rounded-lg;
        @apply text-cyan-900 bg-cyan-200;
        @apply shadow-sm;

        &.xxs {
            @apply flex-space-1;
            @apply p-1 text-xxs;
        }

        &.xs {
            @apply flex-space-1;
            @apply p-1.5 text-xxs;
        }

        &.sm {
            @apply flex-space-1;
            @apply p-2 text-xs;
        }

        &.lg {
            @apply p-3.5 text-lg;
        }

        &.xl {
            @apply p-4 text-xl;
        }

        &.xxl {
            @apply p-5 text-2xl;
        }

        &.toast-info {
            @apply toast-cyan;
        }

        &.toast-success {
            @apply toast-green;
        }

        &.toast-danger,
        &.toast-error {
            @apply toast-red;
        }

        &.toast-warning {
            @apply toast-yellow;
        }

        .btn-close {
            @apply text-inherit;
        }
    }
}