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

/*
More info here about the @layer directive.
https://tailwindcss.com/docs/functions-and-directives#layer
*/

:root {
  --menu-bar-height: 4em;
  --sticky-menu-top-position: var(--menu-bar-height);
}


@layer base {
  a {
    @apply font-medium text-blue-600 dark:text-blue-500 hover:underline
  }

  h1 {
    @apply text-3xl font-extrabold dark:text-white
  }

  h2 {
    @apply text-2xl font-extrabold dark:text-white
  }

  h3 {
    @apply text-lg font-extrabold dark:text-white;
  }

  tr.striped:nth-child(even) {
    @apply bg-gray-50;
  }

  turbo-frame[busy] [role='status'] {
    display: block !important;
  }

  .main-menu {
    height: var(--menu-bar-height);
  }

  .sticky-menu {
    top: var(--sticky-menu-top-position);
  }
}

@layer components {
  table.table {
    @apply w-full text-left text-gray-500 dark:text-gray-400;
  }

  table.table thead {
    @apply text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400;
  }

  table.table thead th {
    @apply px-6 py-3;
  }

  table.table tbody td {
    @apply px-6;
  }


  .link {
    @apply text-blue-600 dark:text-blue-500 hover:underline;
  }

  .button {
    @apply cursor-pointer text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800
  }

  .button--info {
    @apply cursor-pointer text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800
  }

  .button--warning {
    @apply focus:outline-none text-white bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900
  }

  .button--success {
    @apply focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-900
  }

  .button--danger {
    @apply focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900
  }

  .button--sm {
    @apply text-xs py-1 px-2 rounded-md;
  }

  .text-input-default {
    @apply bg-gray-50 border border-gray-300 text-gray-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
  }

  .text-input-default.iconized {
    padding-left: 2.5em;
  }

  .alert--default {
    @apply p-4 mb-4 text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-800
  }

  .alert--info {
    @apply p-4 mb-4 text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800
  }

  .alert--warning {
    @apply p-4 mb-4 text-orange-800 border border-orange-300 rounded-lg bg-orange-50 dark:bg-gray-800 dark:text-orange-400 dark:border-orange-800
  }

  .alert--success {
    @apply p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800
  }

  .alert--danger {
    @apply p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800
  }
}


@layer utilities {
  .animated-slide {
    @apply transition-all ease-in-out duration-200 overflow-y-hidden;
  }

  .animated-slide[data-slide-display="open"] {
    @apply opacity-100 max-h-full;
  }

  .animated-slide[data-slide-display="closed"] {
    @apply opacity-0 max-h-0;
  }

  div[data-measurement-converter-current-system-value="metric"] [data-system="imperial"],
  div[data-measurement-converter-current-system-value="imperial"] [data-system="metric"] {
    display: 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.
 *


 */