/**
 * 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.
 */

/**
 * We don't want html, body to have height: 100%, because it would break
 * the body background image, which we need to display the cat on the
 * front page. So instead, we set min-height: 100vh to the body.
 *
 * Ref: https://greggod.medium.com/css-do-not-put-height-100-on-the-body-html-e36bda3551b3
 */
html, body {
  height: auto !important;

  --ifm-code-padding-horizontal: 0.2rem;
}

body {
  min-height: 100vh;
}

html {
  background-image: url('/img/yarn-bg-black.webp');
  background-size: 100% 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

.theme-doc-sidebar-container {
  border-right: 0 !important;
}

.container {
  --ifm-link-decoration: underline;
}

.rjd-container {
  --ifm-link-decoration: none;
}

.menu {
  overflow-y: scroll;
}

.menu.thin-scrollbar::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

@media (min-width: 996px) {
  .theme-doc-breadcrumbs {
    padding-bottom: 1.5rem;
  }

  .container > .row {
    padding-left: var(--ifm-spacing-horizontal);
    padding-right: var(--ifm-spacing-horizontal);
  }

  html:not(.docs-doc-page) .container > .row {
    padding-top: var(--ifm-spacing-horizontal);
    padding-bottom: var(--ifm-spacing-horizontal);
  }
}

.navbar {
  margin: 0;

  padding: 0 20px;
}

@media (min-width: 996px) {
  .navbar {
    padding: 0 80px;
  }
}

.navbar__logo {
  padding: 10px 0;

  filter: invert(100%) invert(15%) sepia(39%) saturate(2287%) hue-rotate(222deg) brightness(92%) contrast(94%);
}

html:not([x-doc-route="/"]) footer {
  display: none;
}

html.blog-wrapper .container {
  background: white;
  border-radius: 10px;
}

@media (max-width: 996px) {
  .main-wrapper > :last-child {
    margin: 0;
    width: 100vw;
    border-radius: 0;
  }
}

.centered-icon {
  display: flex;
  align-items: center;
}

.centered-icon svg {
  display: block;
}

.navbar {
  top: -1px;
  height: auto;
}

.navbar__items {
  flex: 1 0 min-content;
}
.navbar__items--right {
  margin-left: auto;
}

.navbar__brand {
  margin-right: 100px;
}

.navbar__title {
  display: none;
}

.navbar__item {
  /* Avoid awkward linebreaks of menu items.
   * Labels should be kept short, however. */
  white-space: nowrap;
}

.navbar__inner > .navbar__items:first-child {
  /* Allow the first nav item group to scroll horizontally. */

  /* Without this rule, rightmost items in first nav group
   * would overlap leftmost items in second nav group,
   * becoming completely unreadable. */

  /* NOTE: Would NOT work as is if there is a drop-down menu. */
  /* That’s why it’s only applied to the first nav item group:
   * the second nav group has a dropdown, which would be cut off
   * by this overflow rule. */

  overflow-x: auto;
}

.DocSearch-Button-Placeholder {
  /* Hide faux placeholder in the search trigger button
   * while maintaining reasonable whitespace.
   * This is subjective, but I believe placeholder doesn’t add
   * useful information and makes the button visually
   * appear as a text input field, which it is in fact not. */
  width: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
}

.navbar__logo {
  height: var(--ifm-navbar-height);
}

.menu.thin-scrollbar {
  padding: 0.5rem;
}

html[x-doc-route="/blog/archive"] main .container {
  background: #ffffff;
  border-radius: 10px;
}

html[x-doc-route^="/configuration/"] .col {
  max-width: 100% !important;
}

html:not(.docs-wrapper) .main-wrapper > .container {
  background: #ffffff;
  border-radius: 10px;
}

html.search-page-wrapper .main-wrapper > .container {
  padding: calc(var(--ifm-spacing-horizontal) * 2);
}

html.search-page-wrapper .row {
  padding: 0 !important;
}

.markdown table {
  display: table;

  width: 100%;

  line-height: 1.5em;
}

.markdown pre {
  /* Weirdly, the margin and padding seems to be messing with one another with box-sizing */
  box-sizing: content-box;
}

.markdown .subtitle {
  margin: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading)) 0;
}

.markdown header + .theme-admonition {
  margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
}

.markdown table h4 {
  margin: 0;
}

.markdown .option-table + table td:nth-child(1) {
  width: 230px;
}

.navbar a[target] svg {
  display: inline-block;
  margin-left: .6rem;
  opacity: .2;
}

.footer__links {
  margin-bottom: 0;
}

.table-of-contents.table-of-contents__left-border a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rjd-annotation p:last-child {
  margin-bottom: 0;
}

.rjd-annotation a {
  color: rgb(156, 220, 254);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-decoration-color: #518dae;
  text-underline-offset: 0.2em;
}

.rjd-annotation code {
  all: initial;

  font-family: var(--ifm-font-family-monospace);
  color: rgb(156, 220, 254);
}

.terminal-code pre {
  --prism-background-color: #393A34 !important;
  --prism-color: #f6f8fa !important;
}

pre {
  font-size: .9rem;
}

.footer {
  display: none;
}

.menu__link {
  width: 100%;
}

.menu__list-item-collapsible .menu__link:not(.menu__link--sublist) {
  color: var(--ifm-menu-color-active);
  font-weight: bold;
}

.protocols__autocollapse .menu__caret {
  display: none;
}

.protocols__autocollapse > ul {
  display: none !important;
}

.react-tooltip {
  z-index: calc(var(--ifm-z-index-fixed) + 1);
}

/* You can override the default Infima variables here. */
:root {
  --ifm-font-family-base: "PT Sans";
  --ifm-color-primary:  #514C87;
  --ifm-color-primary-dark: #29285E;
  --ifm-color-primary-darker: #26265C;
  --ifm-color-primary-darkest: #1F2054;
  --ifm-color-primary-light: #7B73B2;
  --ifm-color-primary-lighter: #A69DDF;
  --ifm-color-primary-lightest: #D4C9FF;
  --ifm-menu-link-padding-vertical: 1rem;
  --ifm-menu-link-padding-horizontal: 1rem;
  --ifm-navbar-height: 60px;
  --ifm-navbar-padding-horizontal: 20px;
  --ifm-navbar-padding-vertical: 0;
  --ifm-breadcrumb-item-background-active: #f5f5f5;
  --ifm-code-font-size: 95%;
  --ifm-pre-line-height: 1.7;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

a {
  text-underline-offset: 2px;
  text-decoration-color: #e4e0fd;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
