@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

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

@layer base {
  body {
    @apply font-sans bg-white text-gray-900 dark:bg-gray-900 dark:text-white;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-gray-900 dark:text-white;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-base font-medium text-white transition duration-75 rounded-lg shadow-sm bg-red-500 hover:bg-red-800;
  }
  .btn.btn-sm {
    @apply px-3 py-1 text-sm;
  }
  .btn.btn-lg {
    @apply px-5 py-3 text-lg;
  }

  .btn.btn-success {
    @apply bg-green-500 hover:bg-green-800;
  }

  .btn.btn-warning {
    @apply bg-yellow-500 hover:bg-yellow-800;
  }

  .btn.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-800;
  }

  .btn.btn-tirtiary {
    @apply bg-gray-100 text-gray-800 dark:text-white hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-900;
  }

  .alert {
    @apply px-4 py-2 my-3 bg-blue-500 text-white rounded;
  }
  .alert.alert-danger {
    @apply bg-red-500;
  }
  .alert.alert-success {
    @apply bg-green-500;
  }
  .alert.alert-warning {
    @apply bg-yellow-500;
  }

  .nav-link {
    @apply flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700
  }
  .nav-link svg {
    @apply mr-3 
  }
  .nav-link.is-current-page {
    @apply bg-gray-100 dark:text-white dark:bg-gray-700
  }

  .form-input,
  .form-select,
  .form-textarea,
  .form-richtext,
  .form-multiselect {
    @apply
    block
    text-base
    w-full
    rounded-md
    border-gray-300
    shadow-sm
    focus:border-red-500
    focus:ring-red-500
    sm:text-sm
    placeholder-gray-300
    dark:bg-gray-700
    dark:border-gray-600
    dark:text-gray-300
    dark:placeholder-gray-500
  }

  .form-textarea {
    @apply
    resize-none
    h-24
  }

  .form-checkbox {
    @apply
    h-4 
    w-4
    rounded
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

  .form-radio {
    @apply
    h-4
    w-4
    rounded-full
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

  .tabs .active {
    @apply
    text-red-500
    border-red-500
  }

}
/*
 * 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.
 *


 */

th a.current.asc:after {
  content: ' ▲';
}
th a.current.desc:after {
  content: ' ▼';
}