@import "./fonts.css";
@import "tailwindcss";
@source "../../helpers/*";

@theme {
  --font-beirut: "Beirut Text", sans-serif;
  --font-boutique: "Boutique In Heaven", sans-serif;
  --font-karla: "Karla", sans-serif;
  --color-pura-orange: #B65F05;
}

@layer utilities {
  .animate-shimmer {
    background: linear-gradient(90deg, var(--color-gray-500) 0%, var(--color-gray-300) 50%, var(--color-gray-500) 100%);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    animation: shimmer 2s linear infinite;
  }

  .animate-shimmer-bg {
    background: linear-gradient(90deg, var(--color-gray-100) 0%, var(--color-gray-50) 50%, var(--color-gray-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
  }
}

@layer base {
  details > summary {
    list-style: none;
  }
  
  details > summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .co-card {
    @apply shadow-xs border border-gray-200 bg-gradient-to-b from-white to-gray-50 hover:to-gray-100 rounded-lg;
  }
  
  .co-input {
    @apply bg-white p-2 px-2.5 border border-gray-400 shadow-[inset_3px_3px_0_0_rgba(0,0,0,0.1)] outline-none focus:ring-[3px] focus:ring-yellow-400 max-w-[70ch] rounded-md;
  }

  .co-select {
    @apply bg-white rounded-full border border-black py-2 px-3 outline-none focus:ring-[3px] focus:ring-[#EBD999] min-w-[16ch];
  }

  .co-button {
    @apply rounded-full bg-[#1B232B] text-white py-[6px] px-4 hover:bg-[#2B333B];
  }

  .co-secondary-button {
    @apply rounded-full text-black py-[6px] px-4 border-[1.5px] border-black hover:bg-gray-100;
  }

  .co-tool-loading {
    @apply italic;
    background: linear-gradient(90deg, var(--color-gray-500) 0%, var(--color-gray-300) 50%, var(--color-gray-500) 100%);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    animation: shimmer 2s linear infinite;
  }

  .co-tool-loaded {
    @apply text-gray-500 italic underline decoration-dotted underline-offset-4 cursor-pointer;
  }

  .co-markdown {
    @apply text-gray-900;
  }

  .co-markdown p {
    @apply my-2;
  }

  .co-markdown img {
    @apply mt-4 mb-6 rounded;
  }

  .co-markdown h1 {
    @apply text-xl font-semibold my-6;
  }

  .co-markdown h2 {
    @apply text-xl font-semibold mt-6 mb-3;
  }

  .co-markdown h3 {
    @apply text-lg font-semibold mt-6 mb-3;
  }

  .co-markdown h4 {
    @apply text-base font-semibold my-2;
  }

  .co-markdown ul {
    @apply list-disc mt-4 mb-6 pl-6;
  }

  .co-markdown ol {
    @apply list-decimal mt-4 mb-6 pl-6;
  }

  .co-markdown li {
    @apply my-1;
  }

  [data-role="user"] .co-markdown pre {
    @apply border-l-2 border-black/10 text-black/50 p-2 px-4 ml-1;
  }

  [data-role="user"] .co-markdown code {
    @apply font-beirut;
  }

  [data-role="assistant"] .co-markdown pre {
    @apply bg-gray-900 p-3 rounded overflow-x-auto my-2 text-xs text-white;
  }

  .co-markdown code {
    @apply bg-gray-50 px-1 py-0.5 rounded text-sm;
  }

  .co-markdown pre code {
    @apply bg-transparent p-0;
  }

  .co-markdown blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic my-2;
  }

  .co-markdown a {
    @apply underline underline-offset-4 hover:no-underline;
  }

  .co-markdown table {
    @apply border-collapse my-6 w-full;
  }

  .co-markdown table thead th {
    @apply bg-gray-100;
  }

  .co-markdown table tbody tr:nth-child(even) th,
  .co-markdown table tbody tr:nth-child(even) td {
    @apply bg-gray-100;
  }

  .co-markdown table tbody tr:nth-child(odd) th,
  .co-markdown table tbody tr:nth-child(odd) td {
    @apply bg-gray-200;
  }

  .co-markdown th,
  .co-markdown td {
    @apply border p-2;
    /* word-break: break-word; */
  }

  .co-markdown th {
    @apply font-semibold italic text-left whitespace-nowrap;
  }

  .co-markdown hr {
    @apply my-4;
  }

  .co-markdown strong {
    @apply font-semibold;
  }

  .co-markdown em {
    @apply italic;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}