@import '~src/style/modules';

// the specificity here is important to override the dynamic
// base theme that monaco loads in at runtime
.react-monaco-editor-container > .monaco-editor {
  -webkit-user-select: text;
  font-family: $cf-code-font;
  font-weight: 500;
  font-size: 13px;

  .mtk1 {
    color: $g13-mist;
  }

  .minimap {
    border-left: 2px solid #25252e;

    .minimap-slider {
      background: rgba(53, 54, 64, 0.4);

      .minimap-slider-horizontal {
        background: rgba(53, 54, 64, 0.4);
      }

      &:hover {
        background: rgba(53, 54, 64, 0.4);
        .minimap-slider-horizontal {
          background: rgba(53, 54, 64, 0.4);
        }
      }
    }
  }

  .monaco-scrollable-element .scrollbar.vertical .slider {
    background: rgba(53, 54, 64, 0.6);
  }

  .scroll-decoration {
    box-shadow: #1b1b1b 0 6px 6px -6px inset;
  }

  .margin {
    background: #25252e;
  }

  .current-line ~ .line-numbers {
    color: #bec2cc;
  }
}
