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

body {
  font-family: 'Lato', sans-serif !important;
}

@layer components {
  textarea,
  input[type="text"],
  input[type="checkbox"],
  input[type="checkbox"]:checked {
    @apply border-transparent focus:border-transparent focus:ring-0 !important;
  }

  input[type="checkbox"]:checked {
    @apply bg-gray-300 !important;
  }

  select:focus {
    @apply border-transparent focus:border-transparent focus:ring-0 !important;
  }

  .btn {
    @apply inline-block font-medium tracking-wider rounded shadow py-2 px-4 text-white cursor-pointer;
  }
  .btn-primary {
    @apply btn bg-magma-red hover:bg-orange-400;
  }
  .btn-secondary {
    @apply btn bg-indigo-600 hover:bg-indigo-500;
  }
  .btn-green {
    @apply btn bg-green-800 hover:bg-green-500;
  }
  .btn-danger {
    @apply btn bg-red-600 hover:bg-red-400;
  }
  .btn-cancel {
    @apply btn bg-gray-600 hover:bg-gray-400;
  }
  .btn.disabled {
    @apply bg-gray-400 cursor-not-allowed !important;
  }
  .card {
    @apply bg-gray-300 hover:bg-white rounded shadow;
  }
  .tag {
    @apply bg-gray-700 text-xs inline-block rounded-md py-1 px-2 mt-1 mb-1 mr-2 text-gray-300
  }

  .analysis label {
    @apply text-gray-500 block text-sm;
  }

  .chatnav.active {
    @apply text-orange-400 font-medium;
  }

  .expando-collapsed {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }

  .expando-expanded {
    height: auto;
    opacity: 1;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }

  .grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }
  .grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
  }
  .grow-wrap > textarea,
  .grow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid transparent;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }

  .message {
    @apply border-2 border-transparent;
  }

  .menu-header {
    @apply text-gray-700 px-3 py-2 text-sm flex gap-1 items-center no-underline;
    text-decoration-line: none !important;
  }

  .menu-item {
    @apply menu-header cursor-pointer;
    text-decoration-line: none !important;
  }

  .menu-item a {
    text-decoration-line: none !important;
  }

  .message.highlight {
    @apply border-red-500 border-2 rounded-lg shadow !important;
  }

  [data-controller='botselect'].selected {
    @apply bg-white border-red-700 !important;
  }

  textarea[data-grow="true"] {
    /* vertical gradient from gray 700 to 900 at bottom */
    @apply bg-gradient-to-b from-gray-700 to-gray-800 !important;
  }

  .tab {
    @apply bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold cursor-pointer py-2 px-4 rounded-t-lg;
  }

  .tab.active {
    @apply bg-red-200 font-bold py-2 px-4 rounded-t-lg;
  }

  details[open] summary ~ * {
    animation: sweep .5s ease-in-out;
  }

  @keyframes sweep {
    0%    {opacity: 0; margin-left: -10px}
    100%  {opacity: 1; margin-left: 0px}
  }
}
