main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.break-when-needed {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@layer components {
    .chat-component {
        @apply flex w-full space-x-3 px-3;
    }

    .reversed-chat-component {
        @apply flex-row-reverse space-x-reverse ml-auto;
    }

    .message-common {
        @apply antialiased relative p-3 text-sm mb-2 break-when-needed max-w-xs;
    }

    .message-user {
        @apply antialiased message-common bg-blue-600 text-white rounded-l-lg rounded-br-lg;
    }

    .message-other {
        @apply antialiased bg-gray-300 message-common rounded-r-lg rounded-bl-lg;
    }
    
    .common-button {
        @apply antialiased enabled:hover:bg-slate-200 dark:enabled:hover:bg-zinc-700 focus:outline-none text-gray-700 dark:text-white font-bold px-2 rounded border md:border-2 border-gray-700 dark:border-zinc-700 rounded-xl;
    }

    .common-input {
        @apply antialiased bg-gray-200 dark:bg-zinc-800 appearance-none border-2 border-gray-200 dark:border-zinc-700 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:bg-gray-100 dark:focus:bg-zinc-800 focus:border-zinc-500 visited:border-red-500;
    }

    .common-form-section {
        @apply antialiased md:flex md:items-center mb-6;
    }

    .common-form-label {
        @apply antialiased block text-gray-600 dark:text-gray-200 font-bold md:text-right mb-1 md:mb-0 pr-4;
    }

    .default-pop-up {
        @apply z-50 absolute right-3 bottom-5 md:bottom-10 md:right-10;
    }

    .default-pop-up-icon {
        @apply inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg;
    }

    .default-modal {
        @apply relative rounded-lg shadow bg-slate-200 dark:bg-gray-700 border-4 border-slate-300 dark:border-gray-800 mx-2 md:mx-0;
    }
}