@import '@milkdown/theme-nord/lib/style.css';
@import 'highlight.js/styles/github';
@import 'photoswipe';
@import 'tom-select/dist/css/tom-select';
@import 'tippy.js/dist/tippy.css';
@import 'tippy.js/themes/light.css';
@import 'tippy.js/themes/light-border.css';

.dark .tippy-box[data-theme~='light-border'] {
  background-color: #444655;
}
.dark .tippy-box[data-theme~='light-border'] > .tippy-backdrop {
  background-color: #444655;
}
.dark
  .tippy-box[data-theme~='light-border'][data-placement^='top']
  > .tippy-arrow:before {
  border-top-color: #444655;
}
.dark
  .tippy-box[data-theme~='light-border'][data-placement^='bottom']
  > .tippy-arrow:before {
  border-bottom-color: #444655;
}
.dark
  .tippy-box[data-theme~='light-border'][data-placement^='left']
  > .tippy-arrow:before {
  border-left-color: #444655;
}
.dark
  .tippy-box[data-theme~='light-border'][data-placement^='right']
  > .tippy-arrow:before {
  border-right-color: #444655;
}

.full .ts-control,
.ts-control {
  background-color: #f4f4f4;
  border-color: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
}

.ts-wrapper.single.input-active .ts-control {
  background-color: #f4f4f4;
}

.dark .ts-wrapper.single.input-active .ts-control {
  background-color: #333444;
}

.dark .ts-control {
  background-color: #333444;
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

.dark .ts-control input {
  color: rgba(255, 255, 255, 0.8);
}

.dark .ts-dropdown input {
  color: rgba(255, 255, 255, 0.8);
}

.ts-dropdown {
  background-color: #f4f4f4;
}

.dark .ts-dropdown {
  background-color: #333444;
  color: white;
  border: rgba(255, 255, 255, 0.05);
}

.dark .ts-dropdown .active {
  background-color: #444655;
  color: white;
}

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

@layer utilities {
  .tag-style-0 {
    @apply text-[#CC6767] bg-[#FFE9E9] dark:bg-[#372A2A] rounded;
  }

  .tag-style-1 {
    @apply text-[#8686BF] bg-[#EFEFFF] dark:bg-[#363644] rounded;
  }

  .tag-style-2 {
    @apply text-[#E19B64] bg-[#FFF1E6] dark:bg-[#433C37] rounded;
  }

  .tag-style-3 {
    @apply text-[#5CADD1] bg-[#EEF7FB] dark:bg-[#2F3639] rounded;
  }

  .tag-style-4 {
    @apply text-[#B688C6] bg-[#F7ECFB] dark:bg-[#3B353D] rounded;
  }

  .tag-style-5 {
    @apply text-[#71A6E8] bg-[#E4F1FF] dark:bg-[#2B333C] rounded;
  }

  .prose-article {
    @apply prose dark:prose-invert prose-blockquote:border-primary prose-blockquote:not-italic prose-img:rounded-md prose-img:shadow-md prose-img:mx-auto prose-pre:bg-[#F4F4F4] prose-pre:text-black dark:prose-pre:bg-[#333444] dark:prose-code:bg-[#333444] xl:prose-lg mx-auto break-words max-w-none;
  }
  .prose-comment {
    @apply prose prose-h1:text-base prose-h1:m-0 prose-h2:text-base prose-h2:m-0 prose-h3:text-base prose-h3:m-0 prose-h4:m-0 prose-blockquote:border-[#B1B6C6] prose-blockquote:dark:border-[#80808E] prose-blockquote:pl-2 prose-blockquote:my-4 prose-blockquote:not-italic mb-2 dark:prose-invert max-w-none text-opacity-60;
  }
}

.ProseMirror p.is-editor-empty:first-child:before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

pre code.hljs {
  padding: 0;
}

.milkdown .ProseMirror {
  @apply max-w-full focus-visible:outline-none;
}
