@use "@sass-palette/hope-config";

:root {
  // layout
  --navbar-bg-color: var(--bg-color-float-blur);
  --sidebar-bg-color: var(--bg-color-blur);
}

#{hope-config.$dark-selector} {
  // layout
  --navbar-bg-color: var(--bg-color-blur);
  --sidebar-bg-color: var(--bg-color-blur);
}

#app {
  // code-block fix
  --code-hl-bg-color: var(--code-highlight-line-color);
  --code-ln-color: var(--code-line-color);
  --code-ln-wrapper-width: var(--line-numbers-width);

  // plugin md-enhance code tabs
  --code-tabs-nav-text-color: var(--code-color);
  --code-tabs-nav-bg-color: var(--code-border-color);
  --code-tabs-nav-hover-color: var(--code-highlight-line-color);

  // sidebar space
  --sidebar-space: var(--sidebar-width);

  // override mobile variables
  @media (max-width: hope-config.$pad) {
    --navbar-height: var(--navbar-mobile-height);
    --navbar-vertical-padding: var(--navbar-mobile-vertical-padding);
    --navbar-horizontal-padding: var(--navbar-mobile-horizontal-padding);
    --sidebar-width: var(--sidebar-mobile-width);
  }

  @media (min-width: hope-config.$pc) {
    --sidebar-space: clamp(
      var(--sidebar-width),
      calc(max(0px, calc((100vw - var(--content-width)) / 2 - 2rem))),
      100vw
    );
  }
}

// plugin-docsearch
// stylelint-disable selector-class-pattern
.DocSearch-Button,
.DocSearch {
  --docsearch-primary-color: var(--vp-tc);
  --docsearch-text-color: var(--vp-c);
  --docsearch-highlight-color: var(--vp-tc);
  --docsearch-muted-color: var(--light-grey);
  --docsearch-container-background: rgb(9 10 17 / 80%);
  --docsearch-modal-background: var(--bg-color-float);
  --docsearch-searchbox-background: var(--bg-color-secondary);
  --docsearch-searchbox-focus-background: var(--vp-bg);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--vp-tc);
  --docsearch-hit-color: var(--vp-cl);
  --docsearch-hit-active-color: var(--vp-bg);
  --docsearch-hit-background: var(--vp-bg);
  --docsearch-hit-shadow: 0 1px 3px 0 var(--border-color);
  --docsearch-footer-background: var(--vp-bg);

  #{hope-config.$dark-selector} & {
    --docsearch-logo-color: var(--vp-c);
    --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
    --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
      0 2px 2px 0 rgb(3 4 9 / 30%);
    --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
    --docsearch-footer-shadow: inset 0 1px 0 0 rgb(73 76 106 / 50%),
      0 -4px 8px 0 rgb(0 0 0 / 20%);
  }
}
// stylelint-enable selector-class-pattern

// plugin-nprogress
#nprogress {
  --nprogress-color: var(--vp-tc);
}

// plugin-search
.search-box {
  --search-bg-color: var(--vp-bg);
  --search-accent-color: var(--vp-tc);
  --search-text-color: var(--vp-c);
  --search-border-color: var(--border-color);
  --search-item-text-color: var(--vp-clt);
  --search-item-focus-bg-color: var(--bg-color-secondary);
}

// plugin-external-link-icon
.external-link-icon {
  --external-link-icon-color: var(--light-grey);
}