@use '@vizality' as vz;

:root {
  --vz-editor-background: var(--background-secondary);
  --vz-editor-border-radius: 0 0 8px 8px;

  --vz-editor-context-menu-box-shadow: var(--elevation-high);
  --vz-editor-context-menu-background: var(--background-floating);
  --vz-editor-context-menu-border-radius: 4px;
  --vz-editor-context-menu-font-family: var(--font-primary);

  --vz-editor-context-menu-item-color: var(--interactive-normal);
  --vz-editor-context-menu-item-padding: 8px 12px;
  --vz-editor-context-menu-item-border-radius: 2px;

  --vz-editor-context-menu-separator-height: 1px;
  --vz-editor-context-menu-separator-style: solid;
  --vz-editor-context-menu-separator-color: var(--background-modifier-accent);

  --vz-editor-context-menu-item-focus-background: #5c6fb1;
  --vz-editor-context-menu-item-focus-background-active: #4e5d94;
  --vz-editor-context-menu-item-focus-color: #{vz.color('white')};

  --vz-editor-line-numbers-color: var(--text-muted);

  --vz-editor-minimap-background: var(--vz-editor-background);

  --vz-editor-current-line-indicator-border-color: var(--background-secondary-alt);
  --vz-editor-current-line-indicator-border-width: 2px;
  --vz-editor-current-line-indicator-border-style: solid;
}

.vz-editor-wrapper {
  height: 100%;
  background: var(--vz-editor-background);
  border-radius: var(--vz-editor-border-radius);
  overflow: hidden;
}

.vz-popup-content-wrapper .vz-editor-wrapper {
  @include vz.size(100%);
}

/**
 * Editor code content area
 */
.monaco-scrollable-element.editor-scrollable {
  margin-left: 20px;
  > .monaco-editor-background {
    margin-top: 20px;
  }
}

.monaco-editor {
  height: 100% !important;
  background: none !important;
  > div {
    height: 100% !important;
  }
  .line-numbers {
    color: var(--vz-editor-line-numbers-color) !important;
  }
  /**
   * Little color boxes
   */
  [class*='ced-colorBox'] {
    vertical-align: middle;
    &::before {
      border: none !important;
      border-radius: 2px;
      box-shadow: var(--elevation-medium);
    }
  }
  /**
   * Line numbers gutter
   */
  .margin {
    padding: 20px 0 0;
    background: var(--background-message-hover) !important;
    opacity: .5;
  }
  &-background,
  .inputarea.ime-input {
    background: none !important;
  }
  .scroll-decoration {
    display: none;
  }
  /**
   * Current line indecator
   */
  .view-overlays .current-line {
    border:
      var(--vz-editor-current-line-indicator-border-width)
      var(--vz-editor-current-line-indicator-border-style)
      var(--vz-editor-current-line-indicator-border-color)
      !important;
  }
}

.monaco-menu {
  .monaco-action-bar {
    background: red!important;
  }
}

/**
 * Overview ruler
 */
.decorationsOverviewRuler {
  opacity: .5 !important;
  right: 4px !important;
}

.monaco-custom-checkbox.checked {
  background: var(--vz-editor-item-focus-background) !important;
  color: vz.color('white') !important;
  border-radius: 3px;
}
