@use "sass:meta";

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

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #0e2b3d;
  --ifm-color-primary-dark: #131226;
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: #fffef6;
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-color-secondary: #f8fad8;
  --ifm-color-success: #fcc009;
  --ifm-color-info: #40b9bc;
  --ifm-color-warning: #ef7b1a;
  --ifm-color-danger: #be1d43;
  --ifm-navbar-height: 5rem;
  --ifm-background-color: var(--ifm-color-primary-light);
  --ifm-navbar-background-color: var(--ifm-color-primary-light);
  --ifm-menu-color: var(--ifm-color-primary-dark);
  --ifm-menu-color-active: var(--ifm-color-primary-dark);
  --ifm-menu-color-background-hover: #fdf9d7;
  --ifm-font-family-base: "Karla", sans-serif;
  --ifm-font-family-monospace: "Courier new", sans-serif;
  --ifm-code-background: var(--ifm-color-primary);
  --ifm-code-font-size: 100%;
  --ifm-code-border-radius: 2rem;
  --ifm-code-color: var(--ifm-color-primary-light);
  --ifm-code-padding-vertical: 0.125rem;
  --ifm-code-padding-horizontal: 0.3rem;
  --ifm-h2-font-size: 2rem;
  --ifm-menu-color-background-active: var(--ifm-color-primary);
  --ifm-menu-color-active: var(--ifm-color-primary-light);
  --ifm-leading-desktop: 1;
  --ifm-toc-border-color: transparent;
  --ifm-toc-link-color: var(--ifm-color-primary-dark);
  --ifm-font-color-base: var(--ifm-color-primary-dark);
  --ifm-link-color: var(--ifm-color-primary-dark);
  --ifm-link-hover-color: var(--ifm-color-primary);
  --ifm-pre-padding: 2rem;
  --ifm-pagination-nav-border-radius: 0;
}

html[data-theme="dark"] {
  --ifm-background-color: var(--ifm-color-primary-dark);
  --ifm-navbar-background-color: transparent;
  --ifm-menu-color-active: var(--ifm-color-primary-light);
  --ifm-link-color: var(--ifm-color-primary-light);
  --ifm-link-hover-color: var(--ifm-color-primary-light);
  --ifm-toc-link-color: var(--ifm-color-primary-light);
  --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light);
  --ifm-tabs-color-active: var(--ifm-color-primary-light);
}

/* global */

h1,
h2,
h3 {
  font-family: "Poppins", sans-serif;
}

h2 {
  font-weight: 700;
  line-height: 32px;
}

.markdown > h2 {
  --ifm-h2-font-size: 1.5rem;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

a[class*="menuLinkExternal"]:after {
  background: url("/img/Dagger_Icons_External-link.svg") no-repeat;
}

#__docusaurus {
  background-color: var(--ifm-color-primary-light);

  html[data-theme="dark"] & {
    background: linear-gradient(
      180deg,
      var(--ifm-color-primary-dark),
      var(--ifm-color-primary)
    );
  }
}

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

/* navbar */
.navbar__brand {
  height: var(--ifm-navbar-height);
}

.navbar {
  max-width: 1620px;
  align-self: center;
  box-shadow: none;
}

// sidebar

div[class^="docSidebarContainer"] {
  width: 250px;
  margin-right: 3rem;

  div[class^="sidebar"] {
    width: 250px;
  }
}

/* main */
.main-wrapper {
  align-self: center;
}

main[class^="docMainContainer"] {
  background: #ffffff;
  box-shadow: 0px 4px 16px 4px #13122610;
  border-radius: 2rem;
  margin-top: 1rem;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;

  html[data-theme="dark"] & {
    background: var(--ifm-color-primary);
    box-shadow: 0px 4px 16px 4px #13122610;
    border-radius: 2rem;
    margin-top: 1rem;
    color: #fffef6;
  }
}

/* table-of-contents */
.table-of-contents {
  font-size: 1rem;
}

.table-of-contents__link--active {
  font-weight: bold;
}

html[data-theme="dark"] .table-of-contents__link {
  &--active,
  &:hover {
    color: var(--ifm-color-primary-light);
  }
}

// tabs

/* codeBlock */
div[class^="codeBlock"] {
  border-radius: var(--ifm-code-border-radius);
  background-color: var(--ifm-color-primary-dark) !important;
  margin-bottom: 2.5rem;

  div[class^="codeBlockTitle"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

div[class^="codeBlockLines"] {
  margin-bottom: 0;
  .token-line {
    color: var(--ifm-color-primary-light) !important;
  }
}

button[class^="copyButton"] {
  background-color: var(--ifm-color-primary-light);
  color: var(--ifm-color-primary-dark);
}

/* badge */
.badge--secondary {
  color: var(--ifm-color-primary-dark);
}

/* hash-link */
.hash-link {
  color: #40b8bb;

  &:hover {
    color: #175761;
  }

  &:focus {
    color: var(--ifm-color-primary-dark);
  }
}

/* menu */
.menu__list {
  padding-top: 3.5rem;

  & > .menu__list-item > & {
    padding-top: 0;
  }
}

.menu__link {
  border-radius: 0;

  &:focus {
    background-color: var(--ifm-color-primary-dark);
    color: var(--ifm-color-primary-light);
  }
  &:active {
    background-color: var(--ifm-color-primary);
    color: var(--ifm-color-primary-light);
  }

  html[data-theme="dark"] & {
    color: var(--ifm-color-primary-light);
  }

  html[data-theme="dark"] &:hover {
    color: var(--ifm-color-primary-dark);
  }

  html[data-theme="dark"] &--active:hover {
    color: var(--ifm-color-primary-light);
  }

  html[data-theme="dark"] &:not([href]) {
    color: var(--ifm-color-primary-light);
  }

  html[data-theme="dark"] &:focus {
    color: var(--ifm-color-primary-light);
  }

  html[data-theme="dark"] &:active {
    background-color: var(--ifm-color-primary-light);
    color: var(--ifm-color-primary-dark);
  }
}

/* docsearch */
.DocSearch-Button-Container {
  .DocSearch-Search-Icon {
    display: none;
  }
  &:before {
    content: url("/img/Dagger_Icons_Search.svg");
    display: block;
    width: 20px;
    height: 20px;
  }
}

/* pagination */
.pagination-nav__label svg {
  vertical-align: middle;
}

/* admonition */

div[class*="admonition-"] .admonition-icon svg {
  display: none;
}

@mixin admonitionIcon($args...) {
  @each $name, $path in meta.keywords($args) {
    $bgColor: if(
      $name==danger,
      var(--ifm-color-primary-light),
      var(--ifm-color-primary-dark)
    );
    .admonition-#{$name} .admonition-icon::before {
      mask: url($path);
      content: "";
      background-color: $bgColor;
      display: block;
      width: 22px;
      height: 22px;
    }
  }
}

@include admonitionIcon(
  $note: "/img/Dagger_Icons_Note.svg",
  $tip: "/img/Dagger_Icons_Tip.svg",
  $info: "/img/Dagger_Icons_Info.svg",
  $caution: "/img/Dagger_Icons_Caution.svg",
  $danger: "/img/Dagger_Icons_Danger.svg"
);

$alert: secondary, success, info, warning, danger;

@each $name in $alert {
  $color: if(
    $name==danger,
    var(--ifm-color-primary-light),
    var(--ifm-color-primary-dark)
  );

  .admonition.alert--#{$name} {
    color: $color;
  }
}