@use "sass:meta";
$mobile-width: 480px;
$tablet-width: 996px;
$desktop-width: 997px;
$desktop-xl-width: 1160px;

@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: #{$tablet-width}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

@mixin desktopWide {
  @media (min-width: #{$desktop-xl-width}) {
    @content;
  }
}

/* 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-background-color: var(--ifm-color-primary-light);
  --ifm-code-background: var(--ifm-color-primary-dark);
  --ifm-code-font-size: 100%;
  --ifm-code-color: var(--ifm-color-primary-light);
  --ifm-code-padding-vertical: 0.05rem;
  --ifm-code-padding-horizontal: 0.2rem;
  --ifm-color-primary: #0e2b3d;
  --ifm-color-primary-dark: #131226;
  --ifm-color-primary-darker: #0d0c1b;
  --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: #fefad8;
  --ifm-color-success: #fcc009;
  --ifm-color-info: #40b9bc;
  --ifm-color-warning: #ef7b1a;
  --ifm-color-danger: #be1d43;
  --ifm-color-grey: #858495;
  --ifm-color-grey-light: #a6a5b7;
  --ifm-color-grey-dark: #4b4b5a;
  --ifm-container-width-xl: 990px;
  --ifm-font-color-base: var(--ifm-color-primary-darker);
  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ifm-font-family-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ifm-font-family-monospace: "Source Code Pro", monospace;
  --ifm-h2-font-size: 2rem;
  --ifm-leading-desktop: 1;
  --ifm-link-color: var(--ifm-color-primary-dark);
  --ifm-link-hover-color: var(--ifm-color-primary);
  --ifm-menu-color: var(--ifm-color-primary-dark);
  --ifm-menu-color-active: var(--ifm-color-primary-dark);
  --ifm-menu-color-background-hover: #fdf9d7;
  --ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
  --ifm-navbar-height: 96px;
  --ifm-navbar-background-color: var(--ifm-color-primary-dark);
  --ifm-navbar-padding-vertical: 0;
  --ifm-pagination-nav-border-radius: 0;
  --ifm-pre-padding: 2rem;
  --ifm-toc-link-color: var(--ifm-color-primary-dark);
  --ifm-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.75);
  --ifm-box-shadow-light: 0px 4px 20px rgba(0, 0, 0, 0.3);
  --ifm-border-radius: 20px;
  --ifm-navbar-link-hover-color: var(--ifm-color-grey-light);
}

html[data-theme="dark"] {
  --ifm-background-color: var(--ifm-color-primary-dark);
  --ifm-navbar-background-color: var(--ifm-color-primary-darker);
  --ifm-menu-color: var(--ifm-color-primary-light);
  --ifm-menu-color-active: var(--ifm-color-primary-light);
  --ifm-menu-color-background-active: var(--ifm-color-primary);
  --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);
  --ifm-table-stripe-background: #2e526a;
  --ifm-code-background: var(--ifm-color-primary-dark);
  --ifm-heading-color: var(--ifm-color-primary-light);
  --ifm-menu-color-background-hover: var(--ifm-color-primary);
  --ifm-blockquote-color: var(--ifm-color-primary-light);
  --ifm-blockquote-border-color: var(--ifm-color-primary-light);
  --ifm-color-emphasis-300: var(--ifm-menu-color-background-hover);
  --ifm-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
  --ifm-breadcrumb-item-background-active: var(--ifm-color-primary);
}

/* global */

* {
  --webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--ifm-font-family-title);
}

h1 {
  font-weight: 700;
  font-size: 48px;
}

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

code,
.table-of-contents__link code,
.table-of-contents__link:hover code {
  margin: 0 1px;
  color: var(--ifm-code-color);

  .alert & {
    color: var(--ifm-alert-foreground-color);
  }
}

.markdown {
  & > h2 {
    --ifm-h2-font-size: 1.5rem;
    --ifm-h2-vertical-rhythm-top: 4;
  }

  & > h3 {
    --ifm-h3-font-size: 1.1875rem;
    --ifm-h3-vertical-rhythm-top: 3;
  }

  & > h2 + h3 {
    --ifm-h3-vertical-rhythm-top: 2;
  }

  .admonition {
    a:not(.card) {
      code {
        color: inherit;
      }
    }
  }

  a:not(.card) {
    font-weight: bold;
    text-decoration: underline;
    color: var(--ifm-color-primary-dark);

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

    code {
      display: inline-block !important;
      color: var(--ifm-color-primary-light);
    }

    &:hover {
      color: var(--ifm-color-primary);

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

    &:active {
      color: var(--ifm-color-info);

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

  li {
    font-size: 18px;
  }

  img {
    display: block;
    margin: auto;
    width: 100%;
  }
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  font-family: var(--ifm-font-family-base);
  letter-spacing: 0.5px; //styleName: Body 1;
}

a.menu__link[target="_blank"] {
  svg {
    display: none;
  }

  &:after {
    background: var(--ifm-color-primary-darker);
    mask: url("/img/Dagger_Icons_External-link.svg") no-repeat;
    position: absolute;
    content: "";
    right: var(--ifm-menu-link-padding-horizontal);
    top: var(--ifm-menu-link-padding-vertical);
    height: 1.25rem;
    width: 1.25rem;
  }

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

h1[class^="h1Heading"] {
  margin-bottom: 3rem;
}

.theme-edit-this-page {
  font-weight: bold;
  display: flex;
  align-items: center;
  margin: 2rem 0 5rem;

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

#__docusaurus {
  background-color: white;

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

.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);
}

.button {
  background: var(--ifm-color-secondary);
  color: var(--ifm-navbar-link-color);
  font-family: var(--ifm-font-family-title);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
  text-align: left;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: 50px;

  &:hover {
    background: #ffffff;
    color: var(--ifm-navbar-link-color);
    cursor: pointer;
  }

  &:active {
    background: #131226;
    color: var(--ifm-color-secondary);
  }
}

.hash-link,
.hash-link::before {
  color: var(--ifm-color-info);
}

/* navbar */
.navbar__brand .navbar__logo {
  display: flex;
  height: 100%;
  align-items: center;
  align-content: center;

  img {
    height: 6rem;
  }

  @include desktop {
    height: var(--ifm-navbar-height);
  }
}

.navbar {
  align-self: center;
  box-shadow: none;
  width: 100%;
}

.navbar-sidebar__back {
  background: transparent;
  color: white;
  padding: 1rem 0;
  text-align: center;
}

.navbar__item {
  margin: 0 0.75rem;
}

.react-toggle {
  margin: 0 0.75rem;
}

.header-searchbar {
  button {
    margin: 0px !important;
  }
}

.navbar__inner {
  position: relative;
}

.navbar-blog-link {
  color: white;
}

/* Hamburger Button */

.navbar__toggle {
  color: white;
}

.header-discord-link {
  display: flex;
  height: 40px;
  margin: 20px;
  padding: 0;
  align-items: center;

  a {
    background-color: var(--ifm-color-secondary);
    border-radius: 20px;
    font-weight: bold;
    transition-property: background-color;
    transition: 0.1s ease-in;
    padding: 2px 20px;
    display: flex;
    text-decoration: none;

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

    span {
      margin-left: 5px;
      display: flex;
      align-items: center;
    }
  }

  a:hover {
    background-color: var(--ifm-color-primary-light);
  }

  & div,
  &:hover div {
    height: 30px;
    width: 30px;
    background: url("/img/discord-icon.svg") no-repeat;

    @include tablet {
      background-color: var(--ifm-color-primary);
    }
  }

  > span {
    margin-left: 10px;
    border-right: 1px solid white;
  }

  @include tablet {
    display: none;
  }
}

.navbar-items-separator {
  margin: 0 !important;
  border-left: 1px solid white;
  height: 2rem;
  padding: 0;
}

.header-github-link {
  height: 35px;
  margin: 0;
  padding: 0;
  margin-left: 20px;
  background: url("/img/github-icon.svg") no-repeat;

  @include desktop {
    width: 35px;
    text-indent: 40px;
    white-space: nowrap;
    overflow: hidden;
  }

  @include tablet {
    background-color: var(--ifm-color-primary);
  }
}

.navbar .button svg {
  display: none;
}

/* color mode toggle button */

.navbar__items--right > :last-child {
  margin: 0px 20px;
  button:hover {
    background: var(--ifm-color-primary);
  }
}

/* sidebar */

a[class^="sidebarLogo"] {
  img {
    display: none !important;
  }

  background: url("/img/dagger-logo-dark.png") no-repeat left center;
  background-size: contain;

  html[data-theme="dark"] & {
    background: url("/img/dagger-logo.png") no-repeat left center;
    background-size: contain;
  }
}

/* breadcrumbs */

.breadcrumbs__link {
  html[data-theme="dark"] & {
    color: white !important;
  }
}

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

main[class^="docMainContainer"] {
  background: #ffffff;
  padding: 2rem;

  @include tablet {
    padding: 2rem;
  }

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

/* 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^="codeBlockContainer"] {
  margin-bottom: 2.5rem;

  div[class^="codeBlockTitle"] {
    background-color: var(--ifm-color-primary-dark) !important;
    border-bottom: 1px solid #606770;
    font-family: var(--ifm-font-family-monospace);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  pre {
    border-radius: var(--ifm-global-radius);
  }
}

code[class^="codeBlockLines"] {
  background-color: var(--ifm-color-primary-dark) !important;
  border-radius: 0;
  margin: 0;

  .token-line {
    color: var(--ifm-color-primary-light) !important;
  }

  html[data-theme="dark"] & {
    background-color: var(--ifm-color-primary-darker) !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);
}

.menu {
  padding: 3rem 0.5rem 0.5rem !important;
}

.menu > .menu__list > .menu__list-item {
  padding-bottom: 1rem;
}

.menu__list-item {
  font-weight: normal;
}

.menu__list-item-collapsible .menu__link:not(.menu__link--sublist-caret) {
  font-size: 1.2rem;
  font-weight: 800;
}

.menu__link.button {
  width: 190px;
  margin: auto;
}

.menu__link:not(.button) {
  @include tablet {
    background-color: transparent;
    color: var(--ifm-color-primary-light);

    // --ifm-menu-color-active: var(--ifm-color-primary-light);
    // --ifm-menu-color-background-active: var(--ifm-color-primary);
    span {
      display: block;
      margin-left: 3rem;
      color: white;
    }
  }
}

.menu__link--active:not(.menu__link--sublist) {
  font-weight: bold;

  @include tablet {
    background: var(--ifm-color-primary);
  }
}

.menu__link--active:hover {
  @include tablet {
    color: var(--ifm-color-primary-light);
  }
}

.menu__list-item-collapsible--active {
  background-color: transparent;
}

li.theme-doc-sidebar-item-link-level-1,
li.theme-doc-sidebar-item-link-level-1:active {
  font-size: 1.2rem;
  font-weight: 800;
}

/* docsearch */

.DocSearch-Button {
  margin-right: 2rem !important;

  svg.DocSearch-Search-Icon {
    color: black;
  }

  @include desktop {
    width: 200px;
    position: absolute;
    left: 35%;
    top: 32%;
  }

  @include desktopWide {
    width: 300px;
  }

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

    kbd.DocSearch-Button-Key {
      color: var(--ifm-color-primary-light);
    }
  }

  html[data-theme="dark"] &:hover .DocSearch-Button-Placeholder,
  html[data-theme="dark"] &:active .DocSearch-Button-Placeholder {
    color: var(--ifm-color-primary-dark);
  }
}

.DocSearch--active {
  html[data-theme="dark"] & {
    .DocSearch-Hit-source,
    .DocSearch-Cancel {
      color: rgb(190, 195, 201);
    }
  }
}

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

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

/* admonition */

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

img[alt="github-contribute"] {
  display: block;
  width: 180px;
}

@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: var(--ifm-alert-foreground-color);
      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"
);

/* Utils */

.margin--vertical-md {
  margin: 50px 0px;
}


/* release status badge */
.status-badge {
  width: fit-content;
  background-color: #fdf9d7;
  color: black;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 15px;
}
