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

:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
}

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

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-text-dark-1);
  --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-text-dark-1);
  --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-text-dark-1);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

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

:root {
  --color1: #01579b;
  --color2: #00838f;
  --color3: #ffd600;
  --color4: #ff4081;
  --color5: #f44336;
  --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,
    var(--color1) 0%,
    var(--color1) 9%,
    transparent 9%,
    transparent 10%,
    var(--color2) 10%,
    var(--color2) 19%,
    transparent 19%,
    transparent 20%,
    var(--color3) 20%,
    var(--color3) 29%,
    transparent 29%,
    transparent 30%,
    var(--color4) 30%,
    var(--color4) 39%,
    transparent 39%,
    transparent 40%,
    var(--color5) 40%,
    var(--color5) 49%,
    transparent 49%,
    transparent 50%,
    var(--color1) 50%,
    var(--color1) 59%,
    transparent 59%,
    transparent 60%,
    var(--color2) 60%,
    var(--color2) 69%,
    transparent 69%,
    transparent 70%,
    var(--color3) 70%,
    var(--color3) 79%,
    transparent 79%,
    transparent 80%,
    var(--color4) 80%,
    var(--color4) 89%,
    transparent 89%,
    transparent 90%,
    var(--color5) 90%,
    var(--color5) 99%,
    transparent 99%
  );
  --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-lighter);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

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

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