@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .active-conversation {
        @apply bg-indigo-500 bg-opacity-30 text-white border-l-4 border-indigo-600;
    }
    
    .alert-timeout-conversation {
        @apply border-x-4 border-x-red-600;
    }

    .hoverable:hover:not(.active) {
        @apply bg-blue-100;
    }

    /*.active {
        @apply bg-blue-500 bg-opacity-30 text-white border-l-4 border-blue-700;
    }
    .hover:hover{
        @apply bg-gray-200;
    }*/
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @layer utilities {
    .scrollbar::-webkit-scrollbar {
      width: 11px;
    }
  
    .scrollbar::-webkit-scrollbar-track {
      border-radius: 100vh;
      @apply bg-gray-100
    }
  
    .scrollbar::-webkit-scrollbar-thumb {
      @apply bg-indigo-500;
      border-radius: 100vh;
      border: 3px solid #f8f8f8;
    }
  
    .scrollbar::-webkit-scrollbar-thumb:hover {
      @apply bg-indigo-600
    }
  }