.vue-diff-wrapper {
  overflow: hidden;
  width: 100%;
  border-radius: 0.3em;
}

.vue-diff-theme-dark {
  @import 'highlight.js/scss/monokai.scss';

  background-color: #272822;
}

.vue-diff-theme-light {
  @import 'highlight.js/scss/vs.scss';

  background-color: #fff;
}

.vue-diff-viewer {
  overflow-y: auto;
  width: 100%;
  padding: 1em 0;
  line-height: 1.5;
  font-size: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  text-align: left;

  .vue-diff-viewer-inner {
    position: relative;
    width: 100%;
  }

  .vue-diff-row {
    display: flex;
    width: 100%;

    > div {
      padding: 0 0.5em;
      box-sizing: border-box;
    }

    .lineNum {
      flex: 0 0 auto;
      width: 50px;
      padding-top: 0.05em;
      text-align: right;
      color: #999;
      font-size: 0.9em;
    }

    .code {
      width: calc(100% - 50px);
    }

    &.vue-diff-row-split .code {
      width: calc(50% - 50px);
    }

    .vue-diff-cell-removed {
      background-color: rgba(255, 0, 0, 0.1);

      span.modified {
        background-color: rgba(255, 0, 0, 0.15);
      }

      code::before {
        content: '-';
      }
    }

    .vue-diff-cell-added {
      background-color: rgba(0, 255, 128, 0.1);

      span.modified {
        background-color: rgba(0, 255, 128, 0.15);
      }

      code:before {
        content: '+';
      }
    }

    .vue-diff-cell-disabled {
      background-color: rgba(128, 128, 128, 0.1);
    }

    .vue-diff-cell-fold {
      &.lineNum {
        opacity: 0.8;
        font-size: 0.8em;

        &:before {
          content: '>';
        }
      }

      &.code {
        text-align: center;

        &:before {
          color: #999;
          content: '⋯⋯';
        }
      }
    }

    pre {
      display: block;
      position: relative;
      max-width: 100%;
      margin: 0;
      padding: 0;
      padding-left: 1.5em;
      overflow: visible;
      background: none;
      border-radius: 0;
    }

    .hljs {
      overflow: visible;
      padding: 0;
      background: transparent;
      word-wrap: break-all;
      word-break: break-all;
      white-space: pre-wrap;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;

      &::before {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.8;
      }
    }
  }
}