@import "../variables.less";

.fiddle {
  .mosaic-window-toolbar {
    background: var(--background-1);
    box-shadow: inset 0 0 100px 100px rgba(53, 53, 53, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mosaic-window-toolbar.draggable:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
  }

  .mosaic-window-title {
    color: var(--text-color-3);
  }

  button.mosaic-default-control {
    padding: 0;
    height: 20px;
    width: 20px;
    margin: 5px;
    background-color: #314246;
    border: 0.1rem solid #222b35;
  }

  button.mosaic-default-control:hover {
    background-color: #131d1f;
  }

  .mosaic-window-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    overflow: visible;
    z-index: 4;
    background-color: @background-4;
  }

  .mosaic {
    height: 100vh;

    &.mosaic-blueprint-theme {
      background: #bdbdbd15;
    }
  }

  .editorContainer,
  .monaco-editor {
    width: 100%;
    height: 100%;
  }

  .editorContainer {
    background: @background-1;
  }
}