@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

:root {
  --overflow: hidden visible;
  --text: theme("colors.gray.900");
  --textLight: theme("colors.gray.400");
  --textBody: theme("colors.stone.700");
  --textStrong: theme("colors.rose.700");
  --textHeading: theme("colors.stone.900");
  --troddit-accent: theme("colors.blue.400");
  --base: theme("colors.gray.200");
  --background: theme("colors.slate.100");
  --background2: theme("colors.white");
  --post: theme("colors.slate.50");
  --post2: theme("colors.slate.50");
  --postHover: #ffffff;
  --highlight: theme("colors.gray.100");
  --border: theme("colors.zinc.300");
  --borderHighlight: theme("colors.zinc.500");
  --border2: theme("colors.gray.300");
  --borderHighlight2: theme("colors.gray.400");
  --green: theme("colors.green.600");
  --upvote: theme("colors.orange.500");
  --downvote: theme("colors.blue.400");
  --red: theme("colors.red.400");
  --scrollbar: theme("colors.blue.400");
  --link: theme("colors.blue.700");
  --linkHover: theme("colors.blue.500");
  --commentRibbon: theme("colors.blue.600");
  --commentRibbonHover: theme("colors.blue.400");
  --backgroundComment: theme("colors.white");
  --backgroundCommentAlternate: theme("colors.gray.100");
  --toggleColor: theme("colors.gray.300");
  --toggleHandleColor: theme("colors.sky.600");
}
[data-theme="dark"] {
  --text: theme("colors.stone.200");
  --textLight: theme("colors.gray.500");
  --textBody: theme("colors.stone.100");
  --textStrong: theme("colors.rose.400");
  --textHeading: theme("colors.stone.200");
  --troddit-accent: #2c8ebb; /*theme('colors.blue.600');*/
  --base: theme("colors.black");
  --background: #1a1a1b;
  --background2: #1a1a1b;
  --post: #1a1a1b;
  --post2: #212121;
  --postHover: theme("colors.neutral.800");
  --highlight: theme("colors.neutral.800");
  --border: theme("colors.zinc.700");
  --borderHighlight: theme("colors.zinc.500");
  --border2: theme("colors.trueGray.700");
  --borderHighlight2: theme("colors.trueGray.500");
  --green: #7afbd6;
  --upvote: theme("colors.orange.500");
  --downvote: theme("colors.blue.400");
  --scrollbar: #2c8ebb; /*theme('colors.red.800');*/
  --red: theme("colors.red.700");
  --link: theme("colors.blue.400");
  --linkHover: theme("colors.blue.300");
  --commentRibbon: #2c8ebb; /**theme('colors.red.700');**/
  --commentRibbonHover: #00d2f7; /** theme('colors.red.500');**/
  --backgroundComment: #161616;
  --backgroundCommentAlternate: #1a1a1b;
  --toggleColor: theme("colors.gray.600");
  --toggleHandleColor: theme("colors.sky.600");
}
[data-theme="abyss"] {
  --text: #d1d1d0;
  --textLight: #005388;
  --textBody: #d1d1d0;
  --textStrong: #dbb37d;
  --textHeading: #dbb37d;
  --troddit-accent: #007acc;
  --base: #000c19;
  --background: #060623;
  --background2: #060623;
  --post: #060623;
  --post2: #060623;
  --postHover: #0d192e;
  --highlight: #122039;
  --border: #002953;
  --borderHighlight: #007cd2;
  --border2: #002953;
  --borderHighlight2: #122039;
  --green: #00a530;
  --upvote: #f67265;
  --downvote: #0077fc;
  --red: #ed333f;
  --scrollbar: #002153;
  --link: #5985cb;
  --linkHover: #70a7ff;
  --commentRibbon: #002153;
  --commentRibbonHover: #0079ff;
  --backgroundComment: #000c19;
  --backgroundCommentAlternate: #060623;
  --toggleColor: #1b3157;
  --toggleHandleColor: #007cd2;
}
[data-theme="black"] {
  --text: #ffffff;
  --textLight: #7f7f7f;
  --textBody: #ffffff;
  --textStrong: #04d2f7;
  --textHeading: #ffffff;
  --troddit-accent: #04d2f7;
  --base: #000000;
  --background: #000000;
  --background2: #000000;
  --post: #000000;
  --post2: #000000;
  --postHover: #000000;
  --highlight: #111111;
  --border: #000000;
  --borderHighlight: #ffffff;
  --border2: #000000;
  --borderHighlight2: #000000;
  --green: #0fff50;
  --upvote: #f75c1e;
  --downvote: #04d2f7;
  --red: #f31512;
  --scrollbar: #04d2f7;
  --link: #04d2f7;
  --linkHover: #bdeef7;
  --commentRibbon: #04d2f7;
  --commentRibbonHover: #bdeef7;
  --backgroundComment: #000000;
  --backgroundCommentAlternate: #000000;
  --toggleColor: #212121;
  --toggleHandleColor: #04d2f7;
}
[data-theme="dracula"] {
  --text: #f8f8f2;
  --textLight: #5e73a8;
  --textBody: #f8f8f2;
  --textStrong: #f1fa8c;
  --textHeading: #ff79c6;
  --troddit-accent: #ff79c6;
  --base: #21222d;
  --background: #44475a;
  --background2: #21222d;
  --post: #282a37;
  --post2: #282a37;
  --postHover: #353949;
  --highlight: #313342;
  --border: #3a3c48;
  --borderHighlight: #bd93f9;
  --border2: #3a3c48;
  --borderHighlight2: #545870;
  --green: #50fa7b;
  --upvote: #ff5555;
  --downvote: #8be9fd;
  --red: #ff5555;
  --scrollbar: #bd93f9;
  --link: #8be9fd;
  --linkHover: #60dff1;
  --commentRibbon: #bd93f9;
  --commentRibbonHover: #cfb2f9;
  --backgroundComment: #282a37;
  --backgroundCommentAlternate: #21222d;
  --toggleColor: #545870;
  --toggleHandleColor: #bd93f9;
}
[data-theme="nord"] {
  --text: #eceff4;
  --textLight: #979da9;
  --textBody: #dbdfe5;
  --textStrong: #8fbcbb;
  --textHeading: #88c0d0;
  --troddit-accent: #8fbcbb;
  --base: #2e3440;
  --background: #434c5e;
  --background2: #434c5e;
  --post: #434c5e;
  --post2: #434c5e;
  --postHover: #3b4252;
  --highlight: #3b4252;
  --border: #54617b;
  --borderHighlight: #8fbcbb;
  --border2: #4c566a;
  --borderHighlight2: #4c566a;
  --green: #8fbcbb;
  --upvote: #bf616a;
  --downvote: #5e81ac;
  --scrollbar: #8fbcbb;
  --red: #ea435f;
  --link: #82bebc;
  --linkHover: #0e9792;
  --commentRibbon: #8fbcbb;
  --commentRibbonHover: #0e9792;
  --backgroundComment: #3b4252;
  --backgroundCommentAlternate: #434c5e;
  --toggleColor: #596888;
  --toggleHandleColor: #8fbcbb;
}
[data-theme="ocean"] {
  --text: #cccccc;
  --textLight: #454b5f;
  --textBody: #cccccc;
  --textStrong: #65cdc4;
  --textHeading: #77abff;
  --troddit-accent: #65cdc4;
  --base: #0f111b;
  --background: #0f111b;
  --background2: #0f111b;
  --post: #0f111b;
  --post2: #0f111b;
  --postHover: #0a0c13;
  --highlight: #0c0e16;
  --border: #212634;
  --borderHighlight: #65cdc4;
  --border2: #212634;
  --borderHighlight2: #1b1f2b;
  --green: #b9e981;
  --upvote: #ff7769;
  --downvote: #77abff;
  --red: #ff96ab;
  --scrollbar: #65cdc4;
  --link: #6ae0ff;
  --linkHover: #cbf4ff;
  --commentRibbon: #65cdc4;
  --commentRibbonHover: #b6cdcb;
  --backgroundComment: #0c0e16;
  --backgroundCommentAlternate: #0f111b;
  --toggleColor: #313851;
  --toggleHandleColor: #65cdc4;
}
[data-theme="palenight"] {
  --text: #b6c0cf;
  --textLight: #666f9a;
  --textBody: #b6c0cf;
  --textStrong: #8555c8;
  --textHeading: #77abff;
  --troddit-accent: #8555c8;
  --base: #23283a;
  --background: #24293b;
  --background2: #24293b;
  --post: #282d3f;
  --post2: #282d3f;
  --postHover: #2f3449;
  --highlight: #202433;
  --border: #2d3244;
  --borderHighlight: #8555c8;
  --border2: #2d3244;
  --borderHighlight2: #2d3244;
  --green: #6ae0ff;
  --upvote: #ff7769;
  --downvote: #72a5fc;
  --red: #e86d65;
  --scrollbar: #8555c8;
  --link: #a679e4;
  --linkHover: #ab93cb;
  --commentRibbon: #8555c8;
  --commentRibbonHover: #a679e4;
  --backgroundComment: #24293b;
  --backgroundCommentAlternate: #282d3f;
  --toggleColor: #313851;
  --toggleHandleColor: #8555c8;
}

:root {
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  scrollbar-width: thin;
}
html,
body {
  max-width: 100%;
  overflow: var(--overflow);
}
.sticky-box {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  align-self: flex-start;
}
/*input box*/
.react-autosuggest__input {
  @apply bg-transparent;
}
.react-autosuggest__input--focused {
  @apply outline-none;
}
/*suggestions container*/
.react-autosuggest__container {
  @apply flex flex-col items-center w-full border rounded-lg border-th-border focus-within:border-th-borderHighlight bg-th-background2 md:bg-transparent hover:border-th-borderHighlight;
}

.react-autosuggest__input {
  @apply flex-none w-full h-full px-2 text-sm  outline-none text-th-textLight;
}

.react-autosuggest__input--focused {
  @apply shadow-lg text-th-text border-th-borderHighlight;
}

.react-autosuggest__input--open {
  @apply text-th-text;
}

.react-autosuggest__suggestions-container--open {
  @apply flex flex-col items-center w-full mt-1 bg-th-background2 text-th-text  border rounded-lg border-th-border py-1.5 ring-1 ring-th-base z-[99];
}
.react-autosuggest__suggestions-list {
  @apply w-full overflow-auto list-none;
}
.react-autosuggest__suggestion--highlighted {
  @apply bg-th-highlight;
}

#innerhtml a {
  @apply text-th-link hover:text-th-linkHover hover:underline;
}
#innerhtml p {
}
#innerhtml .md-spoiler-text {
  @apply text-transparent hover:text-th-text bg-th-border hover:bg-transparent p-0.5 rounded-md;
}

.react-markdown a {
  @apply text-th-link hover:text-th-linkHover hover:underline;
}
