/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

:root {
  --list-max-width: 860px;
  --vp-layout-max-width: 1440px;
  --vp-nav-height: 64px;
  --vp-sidebar-width: 272px;
}

:root {
  --border-bg: rgb(238, 238, 238);
  --border-radius: 0.5rem;
  --bg: rgba(253, 251, 251, 0.5);
  --gap: 20px;
  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 2px 4px rgba(232, 227, 247, 0.85);
}

.dark {
  --border-bg: rgb(51, 51, 51);
  --bg: rgb(51, 51, 51);
  --box-shadow: 0 0 0 1px rgba(251, 251, 251, 0.05),
    0 2px 4px rgba(251, 251, 251, 0.05);
}

/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-lightest: rgb(188, 192, 255);
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
  --blue-1: #a175ff;
  --blue-2: #a394f0;
  --cyna-1: #61ffca;
  --cyna-2: #73bc83;
  --cyna-3: #57bf7d;
  --pink1: #ffe9f3;
  --pink2: #f2ccff;
  --pink3: #f5e1ff;
  --pink4: #e7f5f0;
  --pink5: #f1faf5;

  --color1: #bfbfbf;
  --color2: #d5a6bd;
  --color3: #a3c7e6;
  --color4: #9fd4b9;
  --color5: #808080;
  --color6: #404040;
  --color7: #f6eaa2;
  --color8: #ff8c00;
  --color9: #ff8ba6;
  --color10: #d4a373;
  --link-background-color: rgb(232, 227, 247);
  --secondary: #605c71;
}

.dark {
  --secondary: #c9c3dc;
}

/**
 * Link
 * -------------------------------------------------------------------------- */

:root {
  --link-hover-color: var(--cyna-3);
  --link-color: var(--cyna-3);
  --link-hover-underline-color: var(--blue-1);
  --link-underline-shadow: 0 1px 0 var(--link-color);
  --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
  --link-transition: all 0.3s ease;
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #bd34fe 30%,
    #41d1ff
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #bd34fe 50%,
    #47caff 50%
  );
  --vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
}

/**
 * VitePress: Custom fix
 * -------------------------------------------------------------------------- */

/*
  Use lighter colors for links in dark mode for a11y.
  Also specify some classes twice to have higher specificity
  over scoped class data attribute.
*/
.dark .vp-doc a,
.dark .vp-doc a > code,
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
.dark .link.link:hover,
.dark .link.link.active,
.dark .edit-link-button.edit-link-button,
.dark .pager-link .title {
  color: var(--vp-c-brand-lighter);
}

.dark .vp-doc a:hover,
.dark .vp-doc a > code:hover {
  color: var(--vp-c-brand-lightest);
  opacity: 1;
}

/* Transition by color instead of opacity */
.dark .vp-doc .custom-block a {
  transition: color 0.25s;
}