/*! purgecss start ignore */
html {
  background-color: white;
}

html.dark {
  @apply text-dark-high-emphasis bg-dark-surface min-h-screen;
}

html.transitioning-color-scheme,
html.transitioning-color-scheme * {
  transition-duration: 0ms !important;
}

/* Scrollbar styles */
/* Thanks https://joshwcomeau.com/! */
@media (orientation: landscape) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: var(--color-gray-200);
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--color-gray-500);
    border: 2px solid var(--color-gray-200);
  }
  .dark ::-webkit-scrollbar {
    background-color: var(--color-gray-800);
  }
  .dark ::-webkit-scrollbar-thumb {
    border: 2px solid var(--color-gray-800);
    background-color: var(--color-gray-400);
  }
}

.react-markdown > pre {
  font-size: 1em;
  line-height: 1.75;
  padding: 0;
  margin: 0;
  background-color: transparent !important;
  color: #3f3f46;
  font-family: inherit;
  overflow: visible;
}

/* Additional vertical padding used by kbd tag. */
.markdown {
  @apply leading-normal break-words;
}

.markdown p {
  @apply mb-4;
}

.markdown pre {
  @apply mt-4 mb-4;
  font-size: 0.875rem;
}

.markdown > * + * {
  @apply mt-0 mb-4;
}

.markdown > *:first-child {
  @apply mt-0;
}

.markdown li > p + p {
  @apply mt-6;
}

.markdown a {
  @apply font-semibold text-blue-600;
}

.dark .markdown a {
  color: #a9c5ea;
}

.markdown strong a,
.markdown a strong {
  @apply font-bold;
}

.markdown {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply relative;
  }
}

.markdown h5 {
  @apply mt-6 mb-4 text-sm leading-tight font-semibold;
}

.markdown h6 {
  @apply mt-6 mb-4 text-sm leading-tight font-semibold text-gray-600;
}

.markdown blockquote {
  @apply border-l-4 border-gray-300 pr-4 pl-4 text-base text-gray-600;
}

.dark .markdown blockquote {
  @apply text-dark-high-emphasis border-dark-med-emphasis;
}

.markdown code.inline-code {
  @apply text-sm;
}

.markdown h1 code.inline-code {
  @apply text-3xl;
}

.markdown h2 code.inline-code {
  @apply text-2xl;
}

.markdown h3 code.inline-code {
  @apply text-xl;
}

.markdown h4 code.inline-code {
  @apply text-lg;
}

.markdown code.inline-code {
  @apply inline rounded-sm bg-gray-200 px-1 py-0.5 font-mono dark:bg-gray-800;
}

.markdown table:not(.no-markdown) {
  @apply border-gray-600 text-base;
  th,
  td {
    @apply border px-3 py-1;
  }
  & > *:last-child {
    margin-bottom: 0 !important;
  }
}

.markdown ul:not(.no-markdown) {
  @apply mb-6 list-disc pl-8;
}
.markdown ol {
  @apply mb-6 pl-4;
}

.markdown ul:not(.no-markdown) ul {
  list-style-type: circle;
  @apply mt-1 mb-2;
}
.markdown ul:not(.no-markdown) ol {
  @apply mt-1 mb-2;
}
.markdown ol:not(.no-markdown) ul {
  @apply mt-1 mb-2;
}
.markdown ol:not(.no-markdown) ol {
  @apply mt-1 mb-2;
}

.markdown ul:not(.no-markdown) ul:last-child {
  @apply mb-0;
}
.markdown ul:not(.no-markdown) ol:last-child {
  @apply mb-0;
}
.markdown ol:not(.no-markdown) ul:last-child {
  @apply mb-0;
}
.markdown ol:not(.no-markdown) ol:last-child {
  @apply mb-0;
}
.markdown ul:not(.no-markdown) ul ul {
  list-style-type: square;
}

.markdown ul:not(.no-markdown) > li {
  @apply mb-2;
}
.markdown ul:not(.no-markdown) > li:last-of-type {
  @apply mb-0;
}
.markdown ol:not(.no-markdown) > li {
  @apply mb-2;
}
.markdown ol:not(.no-markdown) > li:last-of-type {
  @apply mb-0;
}

.markdown ul ul > li {
  @apply mb-1;
}
.markdown ol ol > li {
  @apply mb-1;
}

.markdown ul p {
  @apply mb-0;
}
.markdown ol p {
  @apply mb-0;
}

.markdown ol {
  counter-reset: number;
}

.markdown ol > li {
  display: flex;
  counter-increment: number;
}

.markdown ol > li:before {
  content: counters(number, '.') '.';
  @apply mr-2 font-semibold text-blue-600;
}

.dark .markdown ol > li:before {
  @apply text-blue-300;
}

.markdown kbd {
  @apply inline-block rounded-sm border px-1 py-0.5 align-middle font-mono text-xs font-normal shadow-sm;
}

/* Override pygments style background color. */
.markdown .highlight pre {
  @apply bg-gray-100!;
}

.spoiler-body > pre {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}

.spoiler-body > pre:first-child {
  margin-top: -2rem !important;
}
.spoiler-body > pre:last-child {
  margin-bottom: -2rem !important;
}
.tailwind-alert > * + * {
  @apply mb-2;
}
.tailwind-alert p {
  @apply mb-2;
}
.tailwind-alert ul {
  @apply mb-2;
}
.tailwind-alert ul li {
  @apply mb-1;
}
.tailwind-alert > ul:last-child li:last-child {
  @apply mb-0;
}
.tailwind-alert blockquote {
  @apply text-sm;
}
.markdown .tailwind-alert a {
  @apply text-black;
}

.markdown .tailwind-alert--info a {
  @apply dark:text-blue-200;
}
.tailwind-alert--info blockquote {
  @apply border-blue-300 text-blue-700 dark:border-blue-500/50 dark:text-blue-300;
}
.markdown .tailwind-alert--info code.inline-code {
  @apply bg-blue-100 dark:bg-blue-800/50 dark:text-blue-200;
}

.markdown .tailwind-alert--warning a {
  @apply dark:text-yellow-200;
}
.tailwind-alert--warning blockquote {
  @apply border-yellow-300 text-yellow-700 dark:border-yellow-500/50 dark:text-yellow-300;
}
.markdown .tailwind-alert--warning code.inline-code {
  @apply bg-yellow-100 dark:bg-yellow-800/50 dark:text-yellow-200;
}

.markdown .tailwind-alert--optional a {
  @apply dark:text-purple-200;
}
.tailwind-alert--optional blockquote {
  @apply border-purple-300 text-purple-700 dark:border-purple-500/50 dark:text-purple-300;
}
.markdown .tailwind-alert--optional code.inline-code {
  @apply bg-purple-100 dark:bg-purple-800/50 dark:text-purple-200;
}

.markdown .tailwind-alert--danger a {
  @apply dark:text-red-200;
}
.tailwind-alert--danger blockquote {
  @apply border-red-300 text-red-700 dark:border-red-500/50 dark:text-red-300;
}
.markdown .tailwind-alert--danger code.inline-code {
  @apply bg-red-100 dark:bg-red-800/50 dark:text-red-200;
}

.quiz p {
  margin-bottom: 0.5rem;
}

.no-y-margin > *:first-child {
  margin-top: 0 !important;
}
.no-y-margin > *:last-child {
  margin-bottom: 0 !important;
}
.tailwind-alert a {
  @apply font-normal text-black underline;
}

.table-alternating-stripes {
  background-color: white;
}
.table-alternating-stripes tr:nth-child(even) {
  @apply bg-gray-50;
}
.dark .table-alternating-stripes {
  background-color: hsla(221, 20%, 12%, 1);
}
.dark .table-alternating-stripes tr:nth-child(even) {
  background-color: hsla(221, 20%, 14%, 1);
}

.dark-mde-container .editor-toolbar {
  border-top-color: #4a5568;
  border-left-color: #4a5568;
  border-right-color: #4a5568;
}
.dark-mde-container .CodeMirror {
  background-color: #edf2f7;
}

/* from https://www.lekoarts.de/en/blog/language-tabs-for-gatsbys-code-blocks */
.gatsby-highlight {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.gatsby-highlight pre[class*='language-'] {
  -webkit-overflow-scrolling: touch;
}
.gatsby-highlight pre[class*='language-']::before {
  background: black;
  border-radius: 0 0 0.25rem 0.25rem;
  color: white;
  font-size: 12px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  right: 1rem;
  text-align: right;
  text-transform: uppercase;
  top: 0;
}
.gatsby-highlight.dark-mode pre[class*='language-cpp']::before {
  content: 'cpp';
  background: #f7df1e;
  color: black;
}
.gatsby-highlight.dark-mode pre[class*='language-java']::before {
  content: 'java';
  background: #ff9800;
  color: black;
}
.gatsby-highlight.dark-mode pre[class*='language-py']::before {
  content: 'python';
  background: #ff3a5b;
  color: black;
}
.gatsby-highlight.light-mode pre[class*='language-cpp']::before {
  content: 'cpp';
  background: #0820e1;
  color: white;
}
.gatsby-highlight.light-mode pre[class*='language-java']::before {
  content: 'java';
  background: #0067ff;
  color: white;
}
.gatsby-highlight.light-mode pre[class*='language-py']::before {
  content: 'python';
  background: #008564;
  color: white;
}

.yt-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.yt-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-input {
  @apply rounded-md border-gray-300 focus:border-blue-300 focus:ring-3 focus:ring-blue-200/30;
}

.dark .ais-Highlight-highlighted,
.dark .ais-Snippet-highlighted {
  @apply bg-orange-700;
}

.katex * {
  /* Tailwind overrides border color; we need to un-override it so that fraction lines and stuff works */
  border-color: currentColor;
}
/*! purgecss end ignore */

.tw-forms-disable input {
  --tw-ring-color: transparent !important;
}
.tw-forms-disable-all-descendants * {
  --tw-ring-color: transparent !important;
}
.gatsby-image-wrapper-rounded img {
  @apply rounded-full;
}

.markdown img {
  @apply dark:bg-gray-300;
}
