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

@layer components {
  /* Main nav */
  body > div > aside > nav h6 {
    @apply uppercase font-bold text-sm px-2 text-gray-500 cursor-default;
  }

  body > div > aside > nav ul {
    @apply space-y-0.5;
  }

  body > div > aside > nav ul li a {
    @apply px-2 py-1 flex items-center gap-1 border border-transparent hover:bg-gray-200 rounded-lg text-gray-600;
  }

  body > div > aside > nav ul li svg {
    @apply size-4;
  }

  body > div > aside > nav ul li a:not(.btn--prescribe):hover {
    @apply text-black;
  }

  body > div > aside > nav ul li a:not(.btn--prescribe):hover svg {
    @apply !text-black;
  }

  body > div > aside > nav ul li a:not(.btn--prescribe):hover svg {
    @apply text-black;
  }

  body > div > aside > nav ul:not(:last-child) {
    @apply !mb-6;
  }

  /* Table styles */
  table.styled {
    @apply table-auto w-full;
  }

  table.styled th,
  table.styled td {
    @apply px-1.5 py-1 whitespace-nowrap;
  }

  table.styled thead th {
    @apply text-left font-medium text-sm text-gray-700 uppercase border-b border-b-gray-400;
  }

  table.styled tbody tr {
    @apply odd:bg-white border-b border-b-gray-300;
  }

  table.styled.styled--divided-cols tr th,
  table.styled.styled--divided-cols tr td, {
    @apply odd:bg-gray-200/80;
  }

  table.styled tbody tr.totals {
    @apply border-none bg-gray-200;
  }

  table.styled tbody tr.grand-totals {
    @apply border-b-0 border-t border-t-gray-400 bg-gray-300;
  }

  /* Main entity column */
  a.main-entity,
  table.styled tbody td:first-child a {
    @apply font-bold underline text-gray-700;
  }

  /* Actions column */
  table.styled th:last-child,
  table.styled tbody td:last-child,
  table.styled tfoot td:last-child {
    @apply text-right;
  }

  /* Form styles */
  .btn {
    @apply bg-black text-white px-3 py-2 inline-block cursor-pointer rounded-lg font-medium whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn.btn--sm {
    @apply text-sm px-2 py-1;
  }

  .btn.btn--lg {
    @apply text-lg px-4 py-3;
  }

  .btn.btn--alt {
    @apply bg-[#9b87f5] text-white;
  }

  .btn.btn--alt2 {
    @apply bg-white text-black ring ring-black;
  }

  .btn.btn--danger {
    @apply bg-red-500 text-white;
  }

  form.styled {
    @apply space-y-3 w-full md:w-2/3 2xl:w-1/2;
  }

  form.styled hr {
    @apply border-2 border-gray-300;
  }

  form.styled input[type="submit"] {
    @apply btn;
  }

  form.styled fieldset {
    @apply flex flex-col gap-1;
  }

  form.styled fieldset.checkbox {
    @apply !flex-row;
  }

  form.styled fieldset label {
    @apply text-sm font-medium uppercase tracking-wide text-gray-700;
  }

  form.styled fieldset input,
  form.styled fieldset textarea,
  form.styled fieldset select,
  input.styled,
  .styled-input {
    @apply px-3 py-2 border rounded-lg bg-white;
  }

  form.styled fieldset .faux-disabled {
    @apply select-none cursor-not-allowed opacity-50 pointer-events-none;
  }

  /* FUTURE: editor/toolbar too wide */
  form.styled .trix-content {
    @apply !bg-white !rounded-lg;
  }

  /* Overrides since Trix gets messed up by TW */
  .trix-content ul {
    @apply list-disc;
  }

  .trix-content ol {
    @apply list-decimal;
  }

  form.styled .field_with_errors {
    @apply flex w-full *:grow;
  }

  form.styled .field_with_errors label {
    @apply text-red-600;
  }

  form.styled .field_with_errors [id] {
    @apply ring-2 ring-red-400;
  }

  /* Main layout frame */
  body > div > main h1 {
    @apply text-3xl font-bold;
  }

  main > header {
    @apply flex items-center gap-2 justify-between mb-4;
  }

  main > header h1 span:not(:last-child) {
    @apply text-gray-600 after:content-['/'] after:ml-2 after:font-light after:text-gray-400;
  }

  main > header h1 span:not(:last-child) a {
    @apply underline decoration-gray-200 hover:decoration-gray-400;
  }

  main > header h1 span:last-child {
    @apply text-blue-600;
  }

  /* Helpers */
  .callout {
    @apply bg-yellow-100 px-1.5 py-0.5;
  }

  .callout-box {
    @apply bg-yellow-100 text-lg ring-2 ring-yellow-300 px-3 py-4 my-3 w-full xl:w-1/2 text-center space-y-2 rounded-lg;
  }

  .callout-box.callout-box--serious {
    @apply bg-red-100 ring-red-300;
  }

  .callout-box h6 {
    @apply font-medium text-xl;
  }

  .pill {
    @apply text-xs uppercase font-medium rounded-full bg-gray-200 px-2 py-1 cursor-default whitespace-nowrap;
  }

  .pill.pill--selected {
    @apply bg-black text-white;
  }

  /* Lists of stuff */
  dl.styled {
    @apply flex flex-wrap w-2/3 items-center *:px-2 *:py-1;
  }

  dl.styled dd:empty::after {
    content: 'Not provided';
    color: rgb(251, 191, 36); /* amber-400 */
    font-weight: bold;
  }

  dl.styled dt {
    @apply font-bold text-lg w-1/4 text-right;
  }

  dl.styled dd {
    @apply text-base w-3/4;
  }

  /* Popup menus */
  ul.menu {
    @apply absolute bg-white text-black px-1 py-2 z-[99] shadow-lg rounded-lg min-w-[18rem] border border-b-gray-300;
  }

  ul.menu li.section {
    @apply text-sm uppercase text-gray-500 font-medium tracking-wide select-none px-2;
  }

  ul.menu li > a {
    @apply block hover:bg-gray-100 rounded px-2 py-1;
  }

  ul.menu li .active {
    @apply font-bold hover:bg-transparent cursor-default;
  }

  /* Filter bars */
  .filter-bar {
    @apply flex gap-1 items-center justify-between mb-2;
  }

  /* TODO: search form -> make smaller */

  .filter-bar .filters {
    @apply flex items-center gap-1;
  }

  .filter-bar .filters a {
    @apply block uppercase font-medium text-sm bg-gray-200/80 hover:bg-gray-300/80 rounded-full px-3 py-1 aria-selected:bg-[#9b87f5] aria-selected:text-white;
  }
}

/* Pagy - FIXME: un-nest, move to components */
.pagy {
  @apply flex items-center justify-center my-3 space-x-2;

  a {
    @apply btn btn--sm bg-gray-200 text-black hover:bg-black hover:text-white;
  }

  a[aria-disabled="true"] {
    @apply cursor-default bg-gray-50 text-black font-bold;
  }
}