@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../../../lib/assets/stylesheets/vitrail/index.css";

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-indigo-600 text-white hover:bg-indigo-800 my-4;
  }

  .btn-secondary {
    @apply py-2 px-4 bg-green-600 text-white hover:bg-green-800 my-4;
  }

  .btn-return {
    @apply py-2 px-4 bg-green-600 text-white hover:bg-green-800 my-4;
  }

  .btn-destroy {
    @apply py-2 px-4 bg-red-600 text-white hover:bg-red-800 my-4;
  }

  table {
    @apply min-w-full border border-gray-300 text-left my-4;
  }

  thead {
    @apply bg-gray-100;
  }

  th {
    @apply px-4 py-2 border-b border-gray-300 font-semibold;
  }

  tbody tr {
    @apply table-row cursor-pointer hover:bg-gray-100;
  }

  tbody td {
    @apply px-4 py-2 border-b border-gray-300;
  }

  .link {
    @apply hover:underline text-blue-700 italic font-semibold;
  }

  .horizontal-form {
    @apply space-y-4 border border-gray-400 px-4 pb-4;
  }

  .form-group {
    @apply flex items-center space-x-4;
  }

  .form-label {
    @apply w-1/4 text-gray-700 font-medium;
  }

  .form-input {
    @apply w-3/4 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
  }

  .form-error {
    @apply text-red-500 text-sm mt-1;
  }

  /* .container {
    @apply space-y-2 p-2 flex flex-col;
  } */

  .container-field {
    @apply flex items-center;
  }

  h1 {
    @apply text-3xl text-zinc-900 mb-4;
  }

  h2 {
    @apply text-xl text-zinc-900 mb-4;
  }

  h3 {
    @apply text-lg text-zinc-900 mb-4;
  }

  p {
    @apply text-sm text-gray-600;
  }

  .title-tag {
    @apply text-xs font-medium bg-gray-700 text-gray-100 px-3 py-2 rounded-lg;
  }

  .popup-notification {
    @apply fixed top-5 right-5 z-50 px-4 py-3 rounded-lg shadow-lg text-white transition-opacity duration-500;
  }

  .popup-notice {
    @apply bg-green-600;
  }

  .popup-alert {
    @apply bg-red-600;
  }

  .pagy.nav {
    @apply flex space-x-1 font-semibold text-sm text-black mb-4;

    a:not(.gap) {
      @apply block px-3 py-1 bg-white border border-black;

      &:hover {
        @apply bg-gray-100 border border-black;
      }

      &:not([href]) {
        @apply text-gray-500 bg-gray-100 cursor-default;
      }

      &.current {
        @apply text-black bg-gray-300;
      }
    }
  }

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


 */