@use "vuepress-shared/styles/reset";

[data-theme="dark"] {
  // vue-repl dark mode

  /**
   * copied from https://github.com/vuejs/repl/blob/main/src/Repl.vue
   */
  .vue-repl {
    --bg: #1a1a1a;
    --bg-soft: #242424;
    --border: #383838;
    --text-light: #aaa;
    --color-branding: #42d392;
    --color-branding-dark: #89ddff;

    .import-map-wrapper {
      background: linear-gradient(
        90deg,
        rgb(26 26 26 / 0%) 0%,
        rgb(26 26 26 / 100%) 25%
      ) !important;
    }

    /**
     * copied from https://github.com/vuejs/repl/blob/main/src/codemirror/codemirror.css
     */
    // stylelint-disable-next-line selector-class-pattern
    .CodeMirror {
      --symbols: #89ddff;
      --base: #a6accd;
      --comment: #6d6d6d;
      --keyword: #89ddff;
      --string: #c3e88d;
      --variable: #82aaff;
      --number: #f78c6c;
      --tags: #f07178;
      --brackets: var(--symbols);
      --property: #f07178;
      --attribute: #c792ea;
      --cursor: #fff;
      --selected-bg: rgb(255 255 255 / 10%);
      --selected-bg-non-focus: rgb(255 255 255 / 15%);

      color: var(--symbols);
    }
  }
}

.vue-playground-wrapper {
  .vue-preview-loading {
    color: var(--vp-c-accent-bg);
  }

  // internal styles
  .repl-container {
    position: relative;

    overflow: hidden;

    height: auto;

    background: var(--vp-c-bg);

    transition: background var(--vp-t-color);

    @media print {
      page-break-inside: avoid;
    }

    .vue-repl {
      height: 300px;
    }

    // reset pre
    [vp-content] & {
      pre,
      pre[class*="language-"] {
        margin: 0;
        padding: 0;
        border-radius: 0;
      }
    }
  }
}