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

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

@layer components {
  .table {
    @apply min-w-full w-full border-[0.5px] rounded border-gray-200 border-separate border-spacing-0 table-auto overflow-hidden;
  }

  .table-row {
    @apply hover:bg-primary-lightest;
  }

  .table-item {
    @apply border-b border-gray-200 px-0.5 py-2.5;
  }

  .table-item-wrap {
    @apply break-words whitespace-normal;
  }

  .table-header-item {
    @apply border-b border-gray-200 py-2 text-sm;
  }

  .input {
    @apply py-2.5 pl-4 pr-8 rounded border-gray-200 leading-4 transition duration-300 text-base hover:border-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0 active:border-gray-300 active:outline-none active:ring-0;
  }

  .textarea {
    @apply py-2.5 px-4 rounded border-gray-200 resize leading-4 transition duration-300 text-base hover:border-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0 active:border-gray-300 active:outline-none active:ring-0;
  }

  .btn {
    @apply py-2.5 px-4 rounded leading-4 shadow transition duration-300 hover:shadow-md;
  }

  .btn-group {
    @apply border rounded-none border-l-transparent shadow-none hover:shadow-none
      first:rounded-l first:border-l-gray-200
      last:rounded-r;
  }

  .btn-group-start {
    @apply rounded-l rounded-r-none border-r shadow-none hover:shadow-none;
  }

  .btn-group-middle {
    @apply rounded-none border-l-transparent border-r shadow-none hover:shadow-none;
  }

  .btn-group-end {
    @apply rounded-l-none rounded-r border-l-transparent shadow-none hover:shadow-none;
  }

  .btn-primary {
    @apply bg-primary-normal text-white hover:bg-primary-highlight active:bg-primary-normal;
  }

  .btn-outline-primary {
    @apply border-[1px] border-primary-normal text-primary-normal hover:bg-primary-normal hover:text-white active:bg-primary-highlight;
  }

  .btn-outline-black {
    @apply border-[1px] border-black bg-white text-black hover:bg-black hover:text-white;
  }

  .btn-outline-normal {
    @apply border-[1px] text-gray-600 bg-white hover:bg-gray-50 active:bg-gray-100 disabled:bg-gray-100 disabled:text-gray-400;
  }

  .badge-flat-blue {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800
  }

  .badge-flat-green {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800
  }

  .badge-flat-yellow {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800
  }

  .badge-flat-red {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800
  }

  .checkbox-primary {
    @apply h-5 w-5 cursor-pointer transition-all appearance-none rounded
      border border-slate-300 text-primary-highlight
      checked:bg-primary-highlight checked:border-primary-highlight
      focus:ring-2 focus:ring-primary-highlight focus:border-primary-highlight;
  }

  .dropdown {
    @apply relative;
  }

  .dropdown-content {
    @apply absolute z-10 top-10 left-1/2 -translate-x-1/2 rounded border-[1px] bg-white hidden
  }

  .dropdown:hover .dropdown-content {
    @apply block
  }

  .dropdown-item {
    @apply block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100
  }

  .card {
    @apply rounded-xl border-[1px] px-6 py-6 bg-white shadow
  }

  input {
    @apply py-2.5 px-4 rounded border-gray-200 leading-4 transition duration-300 text-base hover:border-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0 active:border-gray-300 active:outline-none active:ring-0;
  }

  textarea {
    @apply py-2.5 px-4 rounded border-gray-200 leading-4 transition duration-300 text-base hover:border-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0 active:border-gray-300 active:outline-none active:ring-0;
  }
}
/*
 * 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.
 *


 */