@import '~diagramMaker/styles/mixins';

html, body {
  .sb-show-main.sb-main-padded {
    padding: 0;
  }
  height: 100%;
  width: 100%;
}

#root, #diagramMakerRoot {
  height: 100%;
  width: 100%;
}

#diagramMakerContainer {
  color: var(--diagram-maker-text-color);
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.library {
  height: 560px;
  overflow: auto;
  .draggableElement {
    height: 20px;
    background: var(--diagram-maker-container_disabled-background-color);
  }
}

.example-node {
  box-sizing: border-box;
  border: 1px solid var(--diagram-maker-border-color);
  background-color: var(--diagram-maker-container-background-color);
  padding: 10px;
  height: 100%;
  transition: all .2s ease;

  &.odd {
    border: 1px solid red;
  }

  &.even {
    border: 1px solid blue;
  }

  &.selected {
    border: 1px solid #0073bb;
  }

  & input, & select {
    background-color: var(--diagram-maker-input-background-color);
    border: var(--diagram-maker-input-border);
    color: var(--diagram-maker-text-color);
  }
}

.testInput {
  background-color: var(--diagram-maker-input-background-color);
  border: var(--diagram-maker-input-border);
  color: var(--diagram-maker-text-color);
  width: 100%;
}

.contextMenu {
  @include dm-container-shadow;
  background-color: var(--diagram-maker-container-background-color);
  padding: 5px;
}
