@import '../shared';

.debugPanel {
  position: absolute;
  z-index: 10000;
  top: 10px;
  left: 10px;

  overflow: scroll;

  width: 400px;
  height: 250px;

  border-radius: 3px;
  background-color: rgba(0, 0, 0, .95);

  .closeButton {
    position: absolute;
    top: 10px;
    right: 5px;

    cursor: pointer;

    color: white;

    &:hover {
      opacity: .8;
    }
  }

  .infoContainer {
    font-size: 8px;
    line-height: 8px;

    margin: 5px;
    padding: 5px;

    color: white;

    .string {
      color: green;
    }
    .number {
      color: darkorange;
    }
    .boolean {
      color: blue;
    }
    .null {
      color: magenta;
    }
    .key {
      color: white;
    }
  }
}