@import 'tailwindcss';

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #4a90d9;
  --ifm-color-primary-dark: #3281d4;
  --ifm-color-primary-darker: #2b7acc;
  --ifm-color-primary-darkest: #2364a8;
  --ifm-color-primary-light: #629fde;
  --ifm-color-primary-lighter: #6ea6e1;
  --ifm-color-primary-lightest: #92bce8;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #4a90d9;
  --ifm-color-primary-dark: #3281d4;
  --ifm-color-primary-darker: #2b7acc;
  --ifm-color-primary-darkest: #2364a8;
  --ifm-color-primary-light: #629fde;
  --ifm-color-primary-lighter: #6ea6e1;
  --ifm-color-primary-lightest: #92bce8;
}

[data-theme='light'] .svgColor {
  fill: black;
  stroke: black;
}

[data-theme='dark'] .svgColor {
  fill: white;
  stroke: white;
}

[data-theme='light'] .appIconGrid {
  width: 256px;
  height: 256px
}

[data-theme='dark'] .appIconGrid {
  width: 256px;
  height: 256px
}

/**
 * Support GitHub-styled themed images; see:
 * https://docusaurus.io/docs/markdown-features/assets#github-style-themed-images
 * https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
 */
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
  display: none;
}

.footer a {
  @apply inline-flex items-center gap-1;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.markdown ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.markdown ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
}

.markdown li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
