@tailwind components;
@tailwind utilities;

@layer components {
  .ts-search {
    @apply relative w-full max-w-xs ml-auto;
  }
  .ts-search-input {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm !rounded-md focus:ring-blue-500 focus:border-blue-500 block !pl-10 !p-2 w-full dark:!bg-gray-700 dark:!border-gray-600 dark:!placeholder-gray-400 dark:!text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }

  .ts-search-icon {
    @apply absolute inset-y-0 left-0 flex items-center dark:text-white pl-3 pointer-events-none;
  }

  .ts-btn-action {
    @apply inline-flex items-center !px-2 !py-1 !m-0 text-sm font-medium border focus:z-10 focus:ring-2 disabled:opacity-50 disabled:hover:!bg-transparent disabled:cursor-not-allowed;
  }

  .ts-btn-run {
    @apply !text-green-500 hover:!text-white border-green-500 hover:bg-green-600 rounded-l-md focus:ring-green-400 dark:border-green-500 dark:hover:bg-green-600 dark:focus:ring-green-900 disabled:hover:!text-green-500;
  }

  .ts-btn-delete {
    @apply !text-red-500 hover:!text-white border-red-600 hover:bg-red-600 rounded-r-md focus:ring-red-300 dark:border-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900;
  }

  @keyframes blink {
    from,
    to {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  .ag-cell.task-running {
    @apply !text-blue-500;
    animation: 1s blink ease infinite;
  }

  .ag-cell.task-failed {
    @apply !text-red-500;
  }

  .ag-cell.task-interrupted {
    @apply !text-gray-400;
  }
}