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

/**
 * Colors
 *
 * Each colors have exact same color scale system with 3 levels of solid
 * colors with different brightness, and 1 soft color.
 * 
 * - `XXX-1`: The most solid color used mainly for colored text. It must
 *   satisfy the contrast ratio against when used on top of `XXX-soft`.
 *
 * - `XXX-2`: The color used mainly for hover state of the button.
 *
 * - `XXX-3`: The color for solid background, such as bg color of the button.
 *   It must satisfy the contrast ratio with pure white (#ffffff) text on
 *   top of it.
 *
 * - `XXX-soft`: The color used for subtle background such as custom container
 *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
 *   on top of it.
 *
 *   The soft color must be semi transparent alpha channel. This is crucial
 *   because it allows adding multiple "soft" colors on top of each other
 *   to create a accent, such as when having inline code block inside
 *   custom containers.
 *
 * - `default`: The color used purely for subtle indication without any
 *   special meanings attched to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
 *
 * - `tip`: Used to indicate useful information. The default theme uses the
 *   brand color for this by default.
 *
 * - `warning`: Used to indicate warning to the users. Used in custom
 *   container, badges, etc.
 *
 * - `danger`: Used to show error, or dangerous message to the users. Used
 *   in custom container, badges, etc.
 * -------------------------------------------------------------------------- */

 :root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);

  --vp-c-brand-1: var(--vp-c-indigo-1);
  --vp-c-brand-2: var(--vp-c-indigo-2);
  --vp-c-brand-3: var(--vp-c-indigo-3);
  --vp-c-brand-soft: var(--vp-c-indigo-soft);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);

  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);
}

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

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);
}

/**
 * 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: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}

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

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


/**
 * Component: medium-zoom
 * -------------------------------------------------------------------------- */

.medium-zoom-overlay {
  z-index: 200;
}

video[src],
.medium-zoom-image {
  z-index: 210;
  box-shadow: 1px 1px .4em black;
}

video[src],
li .medium-zoom-image,
p .medium-zoom-image {
  margin: auto;
  border-radius: 1em;
}

/**
 * Component: md-it-footnote
 * -------------------------------------------------------------------------- */

a.footnote-backref {
  text-decoration: unset;
}

/**
 * theme overrides
 * -------------------------------------------------------------------------- */


@media (min-width: 768px) {
  .DocSearch-Button {
    background-color: var(--ul-block-bg);
  }
}
:root {
  --tint-1a: #F5C49C;
  --tint-1b: #FDE6DA;
  --tint-2a: #80D4C7;
  --tint-3a: #FFAFAF;
  --tint-4: #A03B51;
  --r-icon-filter: invert(1);
  --s-color: #0002;
  --bg-f: #00000007;
  --ul-block-bg: #00000005;

  --c-lnk: var(--tint-4);
  --c-lnk-h: #87B219;
  --code: #1422EA;
  --glow: #6D35E1;

  --vp-nav-bg-color: var(--vp-c-bg-alt);
  --vp-home-hero-name-background: linear-gradient(50deg, #f9E 40px, var(--tint-2a) 50%, var(--tint-3a) 70%);
  --vp-home-hero-image-background-image: linear-gradient(50deg, var(--tint-1a) 40px, var(--tint-2a) 50%, var(--tint-3a) 70%);
  --vp-home-hero-image-filter: blur(69px) opacity(.5);
  --vp-button-brand-bg: var(--tint-4);

  --vp-c-brand-1: var(--c-lnk);
  --vp-c-brand-2: var(--c-lnk-h);
  --vp-code-color: var(--code);
  --vp-local-search-highlight-bg: var(--glow);
  --vp-local-search-highlight-text: var(--c-txt-contrast);
}

.dark:root {
  --tint-4: #b14f64;

  --icon-filter: invert(1);
  --icon-filter-l: invert(.8);
  --r-icon-filter: unset;

  --txt-selection-fg: #fff;
  --txt-selection-bg: #fff2;
  --txt-primary: 15px;

  --s-color: #fff2;
  --bg-f: #0002;

  --vp-home-hero-name-background: linear-gradient(50deg, var(--tint-1b) 40px, var(--tint-2a) 50%, var(--tint-3a) 70%);
  --vp-home-hero-image-background-image: linear-gradient(50deg, var(--tint-1b) 40px, var(--tint-2a) 50%, var(--tint-3a) 70%);
  --vp-home-hero-image-filter: blur(69px) opacity(.2);

  --scroll-hand: #fff3;
  --scroll-bg: #fff1;
  --menu-sep: #4D060CAA;
  --c-lnk-bg: #82A05E22;
  --c-sub-head: #99C8FB;
  --c-p-lnk: #bbb;
  --c-p-lnk-h: #EFCBFE;
  --c-p-sub-lnk: #91790C;
  --c-txt-contrast: #ddd;
  --c-txt-primary: #bbb;
  --c-txt-lprimary: #999;
  --c-txt-lower: #444;
  --c-mbg: #121212;
  --c-sbg-f: #121212;
  --c-toc-lv1: var(--c-p-lnk);
  --c-toc-lv2: var(--c-p-sub-lnk);
  --code: #DCD322;
  --head-2-bg: #6D030B;
  --list-panel-bg: #6a6a6a17;
  --item-body-bg: #111;
  --list-panel-br: #8a8a8a24;
  --search-icon: #ccc;
  --c-gototop-icon: #6D35E1;
  --c-gototop-icon-hover: #EFCBFE;
  --c-gototop-bg: #ddd7;
  --c-gototop-bg-hover: #4D060C;
  --ext-link-icon: #444;
  --ext-link-icon-hover: #eee;
  --target-hl-bg: #DDC55644;
  --ul-block-bg: #ffffff05;

  --img-ct-bg: #000b;

  --c-search-bg: #ffffff05;
  --c-search-in-bd: #f1f3;

  --c-10-light: #fff1;
  --c-20-light: #fff2;

  --c-40-light: #fff4;


  --c-70-light: #fff7;

}

a[target="_blank"]::after {
  content: "";
}

a[download] {

  display: flex;
  align-items: center;
  column-gap: .4em;
  padding-top: .4em;

  &::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    color: var(--vp-c-text-3);
    flex-shrink: 0;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3L18 10a3 3 0 0 0-6-6l-6.5 6.5a4.5 4.5 0 0 0 9 9L21 13'/%3E%3C/svg%3E");
    mask-image: var(--icon);
    -webkit-mask-image: var(--icon);
  }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-txt-primary);
}

h3 {
  align-items: center;
  display: flex;
  
  &[data-step] {
    align-items: baseline;
  }
}

h2[data-step]::before {
  color: var(--c-p-sub-lnk);
  content: "STEP " attr(data-step) ": ";
  font-style: inherit;
  font-size: 15px;
}

h3[data-step]::before {
  color: var(--c-p-sub-lnk);
  content: "STEP " attr(data-step) ": ";
  font-style: inherit;
  margin-left: 0;
  font-size: 12px;
  opacity: 1;
}

h4[data-step]::before {
  color: var(--c-p-sub-lnk);
  content: "STEP " attr(data-step) ": ";
  margin-top: auto;
  font-style: inherit;
  font-size: 12px;
  opacity: 1;
}

main h3 {

  &::before {
    content: '◆';
    margin-left: -16px;
    margin-right: 2pt;
    font-size: 16px;
    opacity: .5;
  }
  &:hover:not([data-step])::before {
    opacity: 0;
  }
}

h4:not([data-step]) {

  &::before {
    content: '◇ ';
    margin-left: -18px;
    opacity: .5;
  }

  &:hover::before {
    opacity: 0;
  }
}

p {
  color: var(--c-txt-primary);
}

i[title], p > span[title] {
  text-decoration: underline dotted;
}

.Layout {
  background: repeating-linear-gradient(60deg, var(--bg-f) 10px, transparent 47px);
}

.VPContent {
  background: radial-gradient(transparent 40%, var(--vp-c-bg));
}

.VPNav > .has-sidebar {
  background-color: var(--vp-c-bg-alt);

  &.VPNavBar .title + .content { // top-nav bg on content view
    background-color: var(--vp-nav-bg-color);
  }
}

.vp-doc .custom-block {
  margin: 8px 0;
}

.vp-doc ul {
  border-color: var(--vp-custom-block-details-border);
  color: var(--vp-custom-block-details-text);
  background-color: var(--ul-block-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
}

.vp-doc ul li {
  margin-left: 1em; 
}

.details > iframe,
.info > iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: .6em;
  margin: 10px 0;
  box-shadow: .2em .2em 14px #0007;
}

.details:has(video) {
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    display: block;
    position: absolute;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    background-color: var(--glow);
    opacity: .6;
    height: 8em;
    width: 8em;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
  }


  &[open]::before {
    display: none;
  }

}

img.logo {
  filter: var(--r-icon-filter);
}

.item > p {
  opacity: .4;
}


/**
 * wiki
 * -------------------------------------------------------------------------- */

:not(.clip)::selection {
  background-color: black;
  color: white;
  text-decoration: underline;
}

h3 > svg {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 .2em;
}

s {
  color: var(--s-color);
}
