:root {
  --app-scrollbar-size: 8px;
  --app-scrollbar-track: #e5e5e5;
  --app-scrollbar-thumb: #737373;
  --app-scrollbar-thumb-hover: #616161;
  --app-scrollbar-thumb-active: #525252;
}

@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  *::-webkit-scrollbar,
  .gjs-editor-cont ::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
  }

  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner,
  .gjs-editor-cont ::-webkit-scrollbar-track {
    background-color: var(--app-scrollbar-track);
    border-radius: 0;
  }

  *::-webkit-scrollbar-thumb,
  .gjs-editor-cont ::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    border: 0;
    border-radius: 0;
  }

  *::-webkit-scrollbar-thumb:hover,
  .gjs-editor-cont ::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
  }

  *::-webkit-scrollbar-thumb:active,
  .gjs-editor-cont ::-webkit-scrollbar-thumb:active {
    background-color: var(--app-scrollbar-thumb-active);
  }

  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  }
}

.monaco-editor .monaco-scrollable-element > .scrollbar {
  background-color: var(--app-scrollbar-track);
  border-radius: 0;
}

/* Monaco 弹出列表使用内联尺寸 同步覆盖以保持八像素 */
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical,
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical > .slider {
  width: var(--app-scrollbar-size) !important;
}

.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal,
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal > .slider {
  height: var(--app-scrollbar-size) !important;
}

.monaco-editor .monaco-scrollable-element > .scrollbar > .slider {
  background-color: var(--app-scrollbar-thumb);
  border-radius: 0;
}

.monaco-editor .monaco-scrollable-element > .scrollbar > .slider:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}

.monaco-editor .monaco-scrollable-element > .scrollbar > .slider.active {
  background-color: var(--app-scrollbar-thumb-active);
}