/* stylelint-disable docusaurus/copyright-header */
/**
 * 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.
 * See https://github.com/facebookincubator/infima/blob/master/packages/core/styles/common/variables.pcss
 */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,600;1,400;1,600&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import './shared.scss';

$theme-surface-bg: rgb(0, 0, 48);
// $code-bg: lighten($theme-surface-bg, 4%);
$code-bg: #1b1b5e;

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #8181ff;
  // --ifm-color-primary-dark: #0d8eb1;
  // --ifm-color-primary-darker: #0d86a7;
  // --ifm-color-primary-darkest: #0a6f8a;
  // --ifm-color-primary-light: #10aed9;
  // --ifm-color-primary-lighter: #11b6e3;
  // --ifm-color-primary-lightest: #00c8ff;

  --ifm-color-success: var(--ifm-color-primary);
  // --ifm-color-success-dark: #5ced5c;
  // --ifm-color-success-darker: #4bec4b;
  // --ifm-color-success-darkest: #1ae61a;
  // --ifm-color-success-light: #9ef59e;
  // --ifm-color-success-lighter: #aff6af;
  // --ifm-color-success-lightest: #d0fad0;

  --ifm-color-info: var(--ifm-color-primary);
  // --ifm-color-info-dark: #5cc4e6;
  // --ifm-color-info-darker: #4cbee4;
  // --ifm-color-info-darkest: #21abda;
  // --ifm-color-info-light: #9adaf0;
  // --ifm-color-info-lighter: #aae0f2;
  // --ifm-color-info-lightest: #c9ebf7;

  --ifm-color-danger: var(--ifm-color-primary);
  // --ifm-color-danger-dark: #f54349;
  // --ifm-color-danger-darker: #f43339;
  // --ifm-color-danger-darkest: #e70c13;
  // --ifm-color-danger-light: #f98589;
  // --ifm-color-danger-lighter: #fa9599;
  // --ifm-color-danger-lightest: #fbb6b9;

  --ifm-code-font-size: 95%;
  --ifm-code-padding-vertical: 0;
  --ifm-code-padding-horizontal: 0;
  --ifm-font-family-monospace: 'Source Code Pro', monospace;
  --ifm-font-family-base: 'Raleway', sans-serif;

  --ifm-global-radius: 0;
  --ifm-line-height-base: 2;

  --theme-collection-odd-bg: rgba(161, 161, 161, 0.103);
  --theme-collection-even-bg: rgba(109, 109, 109, 0.281);

  --ifm-table-background: var(--theme-collection-odd-bg);
  --ifm-table-stripe-background: var(--theme-collection-even-bg);

  --syntax-color-punctuation: rgb(199, 146, 234);
  --syntax-color-attr-name: rgb(255, 203, 107);
  --syntax-color-plain: rgb(191, 199, 213);
  --syntax-color-keyword: rgb(194, 59, 142);
  --syntax-color-literal: rgb(136, 194, 59);
  --syntax-color-type: rgb(67, 119, 231);
  --syntax-color-primitive: rgb(89, 187, 243);

  --theme-surface-bg: #{$theme-surface-bg};

  --reference-color-lib: rgb(146, 24, 24);

  // Navbar
  --ifm-navbar-background-color: #{darken($theme-surface-bg, 4%)};
  --ifm-navbar-link-color: var(--ifm-color-white);
  --ifm-footer-background-color: rgb(0, 0, 64);
  --ifm-code-background: #{$code-bg};
  --ifm-link-color: var(--ifm-color-primary);
  --reference-color-doc: var(--ifm-link-color);
}

html {
  &[data-theme='light'] {
    --ifm-color-warning: #c59d30;
    --ifm-color-danger: #f54349;
  }
  &[data-theme='dark'] {
    --ifm-color-warning: #f7c53c;
    --ifm-color-danger: #f54349;
  }
}

html[data-theme='light'] {
  --theme-on-primary: var(--ifm-color-white);
  --ifm-background-color: var(--ifm-color-white);
  // Docsearch
  --docsearch-text-color: var(--ifm-color-gray-800);
  --docsearch-container-background: rgba(0, 16, 64, 0.9);
  --docsearch-searchbox-background: var(--ifm-background-color);

  // Fonts
  --ifm-font-color-secondary: var(--ifm-color-gray-700);
  --ifm-font-color-base: var(--ifm-color-gray-800);
  --ifm-color-highlight: var(--ifm-color-gray-900);
  --reference-bg: #cececebe;
  --reference-bg-hover: #253161;
  --reference-color-hover: var(--ifm-color-gray-200);
}

html[data-theme='dark'] {
  --theme-on-primary: var(--ifm-color-black);
  --docsearch-searchbox-background: var(--ifm-background-color) !important;
  --ifm-code-background: #{$code-bg};
  --ifm-background-color: #1c1c2e;
  --ifm-font-color-base: var(--ifm-color-gray-200);
  --ifm-color-highlight: var(--ifm-color-gray-100);
  --ifm-font-color-secondary: var(--ifm-color-gray-400);
  --reference-bg: #21232bde;
  --reference-bg-hover: #c0c1c5;
  --reference-color-hover: var(--ifm-color-gray-800);
}

.codeblock--with-line-numbers {
  .prism-code {
    counter-reset: line-number;
    .token-line::marker {
      content: counter(line-number);
      color: var(--ifm-color-gray-700);
    }
    .token-line {
      display: list-item;
      counter-increment: line-number;
      padding-left: var(--ifm-pre-padding);
      margin-left: var(--ifm-global-spacing);
    }
  }
}


.DocSearch-Button {
  border-radius: 0 !important;
}

.footer--dark {
  --ifm-footer-background-color: rgb(0, 0, 64);
}

/* Avoid bug with react-modal */
.ReactModal__Body--open .navbar.navbar--fixed-top {
  z-index: 0;
}

.table-of-contents {
  line-height: 1.2;
  li {
    margin-bottom: 16px;
    margin-top: 16px;
  }
}

.navbar__title {
  font-family: var(--ifm-font-family-monospace);
}

.navbar__logo {
  width: 50px;
  height: 50px;
}

.menu__link {
  --ifm-menu-color-background-active: var(--ifm-color-primary);
  --ifm-menu-color-active: var(--theme-on-primary);
  border-radius: var(--ifm-global-radius);
  &#{&}--sublist#{&}--active {
    --ifm-menu-color-active: var(--ifm-color-primary);
    color: var(--ifm-menu-color-active);
  }
  &--sublist {
    text-transform: uppercase;
    cursor: unset;
    font-size: 85%;
    color: var(--ifm-font-color-secondary);
    &::after {
      display: none;
    }
    &:hover {
      background-color: transparent;
    }
  }
}

code {
  font-weight: var(--ifm-font-weight-semibold);
  background-color: transparent;
  border-width: 0;
  padding: 0;
}

.docusaurus-highlight-code-line {
  background-color: rgba(72, 77, 91, 0.25);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

code {
  vertical-align: baseline;
}

// doc and blog pages
.markdown {
  li.li-api-reference {
    &::marker {
      color: var(--syntax-color-type);
    }
    list-style-type: '◆  ';
  }
  li > p,
  dd > p,
  dt > p {
    margin-top: 0;
    margin-bottom: 0;
  }
  dt a:not(:hover) > code {
    background-color: transparent !important;
  }
  dl {
    @extend .figure;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    > :nth-child(4n + 1),
    > :nth-child(4n + 2) {
      background-color: var(--theme-collection-odd-bg);
    }
    > :nth-child(4n),
    > :nth-child(4n - 1) {
      background-color: var(--theme-collection-even-bg);
    }
    dt,
    dd {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0.25rem;
    }
    dd {
      padding-bottom: 1rem;
      margin-left: 0;
      padding-left: 3rem;
    }
  }
  table {
    table-layout: fixed;

    > thead {
      > tr {
        background-color: var(--ifm-color-primary);
        color: var(--theme-on-primary);
      }
      th {
        text-align: left;
      }
    }

    th,
    td,
    tr {
      border-width: 0;
    }

    th,
    td {
      > p {
        margin-bottom: 0;
      }
    }
  }
}

// Admonitions

.admonition {
  &-heading {
    --ifm-alert-color: var(--ifm-alert-background-color);
    --ifm-heading-color: var(--ifm-alert-background-color);
  }
}

.alert {
  &--success {
    --ifm-alert-background-color: var(--ifm-color-success);
  }
  &--info {
    --ifm-alert-background-color: var(--ifm-color-info);
  }
  &--warning {
    --ifm-alert-background-color: var(--ifm-color-warning);
  }
  &--danger {
    --ifm-alert-background-color: var(--ifm-color-danger);
  }
  &--secondary {
    --ifm-alert-background-color: var(--ifm-color-info);
  }
  --ifm-alert-color: var(--ifm-font-color-base);
  --ifm-code-color: var(--ifm-alert-color);
  --reference-color-doc: var(--ifm-alert-color);
  background-color: rgba(5, 5, 5, 0.075);
  border: none;
  border-radius: 0;
  border-left: solid var(--ifm-alert-background-color) 0.5rem;
  svg {
    fill: var(--ifm-alert-color);
  }
}

.button {
  &--primary:not(:hover):not(#{&}--outline) {
    background-color: var(--ifm-color-primary);
    color: var(--theme-on-primary);
  }
}

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.header-github-link:hover {
  opacity: 0.7;
}

@media screen and (max-width: 996px) {
  .navbar__brand {
    display: none;
  }
}

.navbar-sidebar {
  --ifm-menu-color: white;
}
.navbar__inner {
  color: white;
}