@import "tailwindcss";

@source "../../";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  logs: false;
}

/* https://v5.daisyui.com/theme-generator/ */
@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: var(--color-white);
  --color-base-200: var(--color-stone-100);
  --color-base-300: var(--color-stone-200);
  --color-base-content: var(--color-stone-950);
  --color-primary: var(--color-stone-800);
  --color-primary-content: var(--color-white);
  --color-secondary: var(--color-white);
  --color-secondary-content: var(--color-stone-800);
  --color-accent: var(--color-pink-600);
  --color-accent-content: var(--color-white);
  --color-neutral: var(--color-stone-800);
  --color-neutral-content: var(--color-white);
  --color-info: var(--color-sky-700);
  --color-info-content: var(--color-sky-100);
  --color-success: var(--color-emerald-700);
  --color-success-content: var(--color-emerald-950);
  --color-input-success: var(--color-emerald-600);
  --color-warning: var(--color-amber-700);
  --color-warning-content: var(--color-amber-100);
  --color-error: var(--color-red-600);
  --color-error-content: var(--color-white);
  --radius-selector: 1rem;
  --radius-field: .5rem;
  --radius-box: .5rem;
  --size-selector: .3rem;
  --size-field: .3rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;

  --color-text: var(--color-stone-950);
  --color-skeleton: var(--color-gray-300);
  --color-skeleton-overlay: var(--color-gray-200);

  --color-logo-eyes-bg: var(--color-base-100);
}


@plugin "daisyui/theme" {
  name: "dark";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-base-100: var(--color-stone-800);
  --color-base-200: var(--color-stone-900);
  --color-base-300: var(--color-stone-950);
  --color-base-content: var(--color-stone-100);
  --color-primary: var(--color-stone-800);
  --color-primary-content: var(--color-stone-100);
  --color-secondary: var(--color-stone-100);
  --color-secondary-content: var(--color-stone-800);
  --color-accent: var(--color-pink-300);
  --color-accent-content: var(--color-stone-950);
  --color-neutral: var(--color-stone-800);
  --color-neutral-content: var(--color-stone-100);
  --color-info: var(--color-sky-100);
  --color-info-content: var(--color-sky-950);
  --color-success: var(--color-emerald-200);
  --color-success-content: var(--color-emerald-950);
  --color-input-success: var(--color-success);
  --color-warning: var(--color-amber-100);
  --color-warning-content: var(--color-amber-950);
  --color-error: var(--color-red-200);
  --color-error-content: var(--color-red-950);
  --radius-selector: 1rem;
  --radius-field: .5rem;
  --radius-box: .5rem;
  --size-selector: .3rem;
  --size-field: .3rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;


  --color-text: var(--color-white);
  --color-skeleton: var(--color-gray-400);
  --color-skeleton-overlay: var(--color-white);

  --color-logo-eyes-bg: var(--color-stone-700);
}

@theme {
  --font-display: 'Nunito', sans-serif;
  --font-code: 'Atkinson Hyperlegible Mono', sans-serif;

  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) var(--animate-pulse-iterations, infinite);
  --animate-pulse-once: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 1;

  --animate-zoom: zoom 2s ease-in-out infinite;

  @keyframes zoom {
    0% {
      transform: scale(100%);
    }
    50% {
      transform: scale(110%);
    }
    100% {
      transform: scale(100%);
    }
  }
}

@custom-variant light {
  &:where([data-theme="light"], [data-theme="light"] *) {
    @slot;
  }
}

@custom-variant dark {
  &:where([data-theme="dark"], [data-theme="dark"] *) {
    @slot;
  }
}

@layer base {
  html,
  body {
    @apply w-full h-full overflow-x-hidden;
  }

  body {
    @apply font-display;
  }

  strong {
    @apply font-medium;
  }
}

/** 
 * Change the background color of the skeleton loader
 * https://github.com/saadeghi/daisyui/blob/master/src/components/styled/skeleton.css 
 */
@layer utilities {

  .checkbox {
    --size-selector: .25rem;
    --radius-selector: .5rem;
  }

  .badge {
    --size-selector: 0.1875rem;
  }
  
  .tooltip::before {
    --radius-field: .25rem;
  }

  .fieldset-legend {
    font-size: .875rem;
  }

  .tab-content {
    @apply bg-base-100 border-base-300 p-6;
  }
  
  .skeleton:not(.skeleton--default) {
      @apply rounded-full;
      background-color: var(--color-skeleton);
      background-image: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        var(--color-skeleton-overlay) 50%,
        transparent 60%,
        transparent 100%
      );
  }

  .validator:not([type="checkbox"]) {

    &:user-invalid, &:has(:user-invalid) {
      --input-color: var(--color-base-content);
    }


    &[user-valid="true"], &:has([user-valid="true"]) {
      &, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
        --input-color: var(--color-success);
      }
    }
    
    &[user-invalid="true"], &:has([user-invalid="true"]) {
      --radius-field: 0;
      --custom-radius-field: .5rem;

      border-top-right-radius: var(--custom-radius-field);
      border-top-left-radius: var(--custom-radius-field);
      
      &, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
        --input-color: var(--color-error);
      }

      & ~ .validator-hint {
        --custom-radius-field: .5rem;

        border-bottom-right-radius: var(--custom-radius-field);
        border-bottom-left-radius: var(--custom-radius-field);
        
        @apply visible flex items-center justify-end gap-2 
          mt-0 py-0.5 px-2 
          bg-error text-error-content;
      }
    }
  }

  .label {
    @apply text-wrap;
  }

  .input {
    &:has(> input[disabled]), &:is(:disabled, [disabled]) {
      @apply border-base-300;
    }
  }

  .modal {
    &:not(dialog:not(.modal-open)), 
    &::backdrop {
      @apply bg-black/70;
    }
  }

  .btn {
    @apply font-normal;
  }

  .bubble {
    @apply rounded-xl bg-white/50 shadow-2xl backdrop-blur-3xl;

    @variant dark {
      @apply bg-white/10;
    }
  }

  .btn {
    outline-color: var(--custom-outline-color, var(--btn-color));

    @variant dark {
        &.btn-primary {
          --custom-outline-color: var(--color-primary-content);
        }
        &.btn-secondary {
          --custom-outline-color: var(--color-secondary-content);
        }
        &.btn-neutral {
          --custom-outline-color: var(--color-neutral-content);
        }
    }
    &.btn-outline {
      @media (hover: hover) {
        &:not(:hover):not(:focus-visible):not(:active) {
          @variant dark {
            &.btn-primary {
              --btn-color: var(--color-primary-content);
            }
            &.btn-secondary {
              --btn-color: var(--color-secondary-content);
            }
            &.btn-neutral {
              --btn-color: var(--color-neutral-content);
            }
          }
        }
      }
    }
  }
}

@utility no-scrollbar {
  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}

.chat-markdown {
  @apply overflow-x-hidden leading-7 text-base-content/80;

  hr {
    @apply my-4 border-t border-base-content/30;
  }
  strong {
    @apply font-bold text-base-content;
  }

  ul {
    @apply list list-disc my-4 pl-6;
  }

  ol {
    @apply list list-decimal my-4 pl-6;
  }

  li {
    @apply pl-6;
  }

  table {
    @apply table;
  }

  blockquote {
    @apply my-4 py-2 pl-4 border-l-4 border-base-content/50 italic text-base-content/90;
  }

  p {
    @apply mb-2 last:mb-0;
  }

  p,
  li {
    & > code {
      @apply whitespace-pre-wrap p-1 rounded bg-accent/10 text-accent text-sm;
    }
  }

  a {
    @apply link;
  }
}

html {
  @apply bg-gradient-to-tr from-pink-500/20 via-pink-500/10 to-pink-500/30;

  @variant dark {
    @apply dark:from-pink-500/30 dark:via-pink-500/10;
  }
}

.icon {
  @apply size-6;
}