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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {

  .tabs {
    @apply flex;
  }

  .tab {
    @apply text-sm;
    @apply px-4;
    @apply py-1;
    @apply border-b-2;
    @apply border-slate-400;
    @apply text-slate-400;
    @apply cursor-pointer;
  }

  .tab-active {
    @apply border-b-slate-800;
    @apply text-slate-800;
  }




  .note-teaser {
    @apply flex;
    @apply justify-between;
    @apply items-center;
    @apply my-3;
    @apply p-3;
    @apply bg-gray-200;
    @apply rounded;
    @apply gap-3;
    @apply border-l-8;
    @apply border-gray-200;

    &.priority {
      @apply bg-red-200
    }

    &.flagged {
      @apply border-red-800;
    }

    .assignee-badge {
      @apply inline-flex;
      @apply items-center;
      @apply justify-center;
      @apply text-center;
      @apply border;
      @apply border-white;
      @apply rounded-md;
      @apply w-8;
      @apply h-8;
      @apply text-sm;
      @apply text-white;
      @apply font-semibold;
    }
  }

  .success {
    @apply bg-gray-900;
  }


  .form-control {
    @apply flex;
    @apply flex-col;
  }

  .label {
    @apply flex;
    @apply text-gray-800;
    @apply items-center;
    @apply justify-between;
    @apply px-2;
    @apply py-1;
  }

  .label-text {
    @apply text-sm;
    @apply leading-5;
  }

  .form-input {
    @apply rounded-lg;
    @apply border-gray-300;
  }

  .form-textarea {
    @apply rounded-lg;
    @apply text-sm;
    @apply leading-8;
    @apply border-gray-300;
  }

  .form-select {
    @apply rounded-lg;
    @apply border-gray-300;
  }

  .form-checkbox {
    @apply border;
    @apply border-gray-300;
    @apply rounded-lg;
    @apply w-6;
    @apply h-6;
  }

  .form-checkbox:checked {
    @apply bg-gray-900;
  }

  .form-select {
    @apply font-semibold;
    @apply text-sm;
  }

  .badge {
    @apply rounded-full;
    @apply px-1.5;
    @apply bg-gray-900;
    @apply text-white;
    @apply text-xs;
  }

  .badge-secondary {
    @apply bg-blue-700;
  }

  .btn {
    @apply rounded-lg;
    @apply px-4;
    @apply text-center;
    @apply text-sm;
    @apply font-bold;
    @apply p-4;
    @apply uppercase;
    @apply cursor-pointer;

    &.btn-primary {
      @apply bg-blue-500;
      @apply hover:bg-blue-700;
      @apply text-white;
    }

    &.btn-secondary {
      @apply bg-gray-300;
    }

    &.btn-outline {
      @apply border;
      @apply border-gray-700;
    }

    &.btn-square {
      @apply aspect-square;
    }

    &.btn-save {
      @apply bg-green-500;
      @apply hover:bg-green-700;
      @apply text-white;
    }

    &.btn-ghost {
      @apply hover:bg-gray-300;
    }

    &.btn-danger {
      @apply bg-red-500;
      @apply hover:bg-red-700;
      @apply text-white;
    }

    &.btn-sm {
      @apply p-2;
    }
  }

  /* Styles for kramdown-generated HTML */
  .markdown {
    ul {
      @apply list-disc pl-6 my-2;
    }

    ol {
      @apply list-decimal pl-6 my-2;
    }

    li {
      @apply my-1;
    }
  }

  /* Drag and drop styles for SortableJS */
  .sortable-ghost {
    @apply opacity-50;
    @apply bg-gray-100;
  }

  .sortable-drag {
    @apply opacity-100;
  }

  .drag-handle {
    @apply cursor-grab;
  }

  .drag-handle:active {
    @apply cursor-grabbing;
  }

  /* Invalid drop zone indicator for dependent questions */
  .invalid-drop-zone {
    @apply bg-red-700;
    @apply border-2;
    @apply border-red-400;
    @apply border-dashed;
  }

  /* Conditional question transitions */
  [data-conditional-questions-target="question"] {
    @apply transition-all;
    @apply duration-300;
    @apply ease-in-out;
  }

  [data-conditional-questions-target="question"].hidden {
    @apply opacity-0;
    max-height: 0;
    @apply overflow-hidden;
    @apply pointer-events-none;
  }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */