@use "valaxy/client/styles/mixins/index.scss" as *;

:root {
  --vp-code-block-bg: var(--va-c-bg-alt);
  --vp-code-tab-divider: var(--va-c-gutter);
}

// for dark
.dark .vp-code-light {
  display: none;
}

html:not(.dark) .vp-code-dark {
  display: none;
}


@include mobile {
  .markdown-body {
    div[class*="language-"] {
      margin: 0 var(--va-code-mobile-margin-x, -1rem);
    }
  }
}

@media (width >=640px) {
  .markdown-body div[class*="language-"] {
    border-radius: 6px;
    margin: 16px 0;
  }
}

@media (width <=639.9px) {
  .markdown-body li div[class*="language-"] {
    border-radius: 6px 0 0 6px;
  }
}

.markdown-body {
  code {
    // relative h1, etc
    font-size: 0.85em;
  }

  div[class*="language-"] {
    overflow: auto hidden;
    position: relative;
    background-color: var(--va-code-block-bg);
  }

  [class*='language-'] pre,
  [class*='language-'] code {
    /* rtl:ignore */
    direction: ltr;

    /* rtl:ignore */
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    overflow-wrap: normal;
    tab-size: 4;
    hyphens: none;
  }

  [class*='language-'] pre {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 20px 0;
    background: transparent;
    overflow-x: auto;
  }

  [class*='language-'] code {
    display: block;
    padding: 0 24px;
    width: fit-content;
    min-width: 100%;
    line-height: var(--va-code-line-height);
    font-size: var(--va-code-font-size);
    color: var(--va-code-block-color);
    transition: color var(--va-transition-duration-moderate);
  }

  [class*='language-'] code .highlighted {
    background-color: var(--va-code-line-highlight-color);
    transition: background-color var(--va-transition-duration-moderate);
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 2 * 24px);
    display: inline-block;
  }

  [class*='language-'] code .highlighted.error {
    background-color: var(--va-code-line-error-color);
  }

  [class*='language-'] code .highlighted.warning {
    background-color: var(--va-code-line-warning-color);
  }

  // copy
  [class*='language-']>button.copy {
    /* rtl:ignore */
    direction: ltr;
    position: absolute;
    top: 12px;

    /* rtl:ignore */
    right: 12px;
    z-index: 3;
    border: 1px solid var(--va-code-copy-code-border-color);
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: var(--va-code-copy-code-bg);
    opacity: 0;
    cursor: pointer;
    background-image: var(--va-icon-copy);
    background-position: 50%;
    background-size: 20px;
    background-repeat: no-repeat;
    transition:
      border-color var(--va-transition-duration),
      background-color var(--va-transition-duration),
      opacity var(--va-transition-duration);
  }

  [class*='language-']:hover>button.copy,
  [class*='language-']>button.copy:focus {
    opacity: 1;
  }

  [class*='language-']>button.copy:hover,
  [class*='language-']>button.copy.copied {
    border-color: var(--va-code-copy-code-hover-border-color);
    background-color: var(--va-code-copy-code-hover-bg);
  }

  [class*='language-']>button.copy.copied,
  [class*='language-']>button.copy:hover.copied {
    /* rtl:ignore */
    border-radius: 0 4px 4px 0;
    background-color: var(--va-code-copy-code-hover-bg);
    background-image: var(--va-icon-copied);
  }

  [class*='language-']>button.copy.copied::before,
  [class*='language-']>button.copy:hover.copied::before {
    position: relative;
    top: -1px;

    /* rtl:ignore */
    transform: translateX(calc(-100% - 1px));
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--va-code-copy-code-hover-border-color);

    /* rtl:ignore */
    border-right: 0;
    border-radius: 4px 0 0 4px;
    padding: 0 10px;
    width: fit-content;
    height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--va-code-copy-code-active-text);
    background-color: var(--va-code-copy-code-hover-bg);
    white-space: nowrap;
    content: var(--va-code-copy-copied-text-content);
  }

  [class*='language-']>span.lang {
    position: absolute;
    top: 2px;

    /* rtl:ignore */
    right: 8px;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    color: var(--va-code-lang-color);
    transition:
      color var(--va-transition-duration-moderate),
      opacity var(--va-transition-duration-moderate);
  }

  [class*='language-']:hover>button.copy+span.lang,
  [class*='language-']>button.copy:focus+span.lang {
    opacity: 0;
  }

  // diff
  [class*='language-'] code .diff {
    transition: background-color var(--va-transition-duration-moderate);
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 2 * 24px);
    display: inline-block;
  }

  [class*='language-'] code .diff::before {
    position: absolute;
    left: 10px;
  }

  [class*='language-'] code .diff.remove {
    background-color: var(--va-code-line-diff-remove-color);
    opacity: 0.7;
  }

  [class*='language-'] code .diff.remove::before {
    content: '-';
    color: var(--va-code-line-diff-remove-symbol-color);
  }

  [class*='language-'] code .diff.add {
    background-color: var(--va-code-line-diff-add-color);
  }

  [class*='language-'] code .diff.add::before {
    content: '+';
    color: var(--va-code-line-diff-add-symbol-color);
  }

  // collapse
  [class*='language-']>button.code-block-unfold-btn {
    display: none;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    opacity: 1;
    cursor: pointer;
    background-image: linear-gradient(-180deg, rgb(0 0 0 / 0) 0%, var(--va-c-bg-dark) 100%);

    &::before {
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      background-image: var(--va-icon-collapse);
      background-position: 50%;
      background-size: 16px;
      background-repeat: no-repeat;
    }
  }

  [class*='language-'].folded>button.code-block-unfold-btn {
    display: block;
  }
}