@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/css/shepherd.css');

textarea {
  @apply resize-y;
}

.markdown {
  h1 {
    @apply text-2xl font-bold py-4;
  }

  h2 {
    @apply text-xl font-bold py-2;
  }

  h3 {
    @apply text-lg font-bold py-2;
  }

  p {
    @apply py-2;
  }

  hr {
    @apply border-gray-200 my-4;
  }

  ul {
    @apply list-disc list-inside;
  }

  ol {
    @apply list-none list-inside;
  }

  a {
    @apply text-indigo-500;
  }
}

@keyframes bobbing {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@layer utilities {
  .animate-bobbing {
    animation: bobbing 2s ease-in-out infinite;
  }
}


.prose {
  @apply max-w-full;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apply the animation */
.pulse {
  display: inline-block;
  /* Ensure it respects the scaling */
  animation: pulse 1s infinite;
}

@keyframes thinking {
  0% {
    transform: scale(1) translateY(0);
  }

  25% {
    transform: scale(1.05) translateY(-2px);
  }

  50% {
    transform: scale(0.95) translateY(1px);
  }

  75% {
    transform: scale(1.02) translateY(-1px);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

.animate-thinking {
  animation: thinking 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
  opacity: 0;
}

/* a,
.prose a {
  @apply text-dark-accent dark:text-light-accent;
} */

.dropzone {
  @apply bg-indigo-50 border border-main justify-center;
}

.dropzone-msg-title {
  @apply text-main;
}

.dropzone-msg-desc {
  @apply text-sm;
}

/* .manage a {
  @apply text-indigo-500;
} */

/* turbo-frame {
  @apply border border-white;
} */

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.loader {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 2px solid #E548B1;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 2s ease-in-out infinite alternate;
}

.loader::after {
  border-color: #4F46E5;
  animation-direction: alternate-reverse;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none;
}

[data-controller="showcase"] [data-showcase-target="item"] {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

[data-controller="showcase"] [data-showcase-target="item"].opacity-0 {
  opacity: 0;
}

/* Hide scrollbar for WebKit browsers */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.scrollbar-hide {
  scrollbar-width: none;
  /* Firefox */
}

.event-document {
  @apply bg-white p-4 rounded-sm border border-gray-200 w-full md:w-2/3 shadow-md hover:shadow-lg transition-shadow duration-200;
}

@import 'actiontext.css';