.editor-panel {
  border: 1px solid #d2d2d2;
  border-radius: 1px;
  margin-bottom: 13px;

  .header {
    border-bottom: 1px solid #d2d2d2;
    overflow-y: auto;
    background-color: #ffffff;
  }

  .actions {
    float: right;
  }

  .status {
    float: left;
    padding-top: 9px;
    padding-left: 13px;
    font-size: 13px;

    &.connected {
      color: #98d452;
    }
    &.not-connected {
      color: #f44336;
    }

    .status-icon {
      margin-right: 3px;
      font-size: 9px;
      vertical-align: middle;
    }
    .status-text {
      vertical-align: middle;
    }
  }

  .action {
    padding: 8px 10px;
    display: inline-block;
    border-left: 1px solid #d2d2d2;
    color: #d4d4d4;
    transition: color 0.2s ease-out;

    &.actionable {
      color: #333333;
      transition: color 0.2s ease-in;
    }

    &:not(.actionable) {
      cursor: default;
    }

    &.actionable:hover {
      background: #f7f7f7;
    }
  }
}

.action-list {
  list-style: none;
}

.action-list .action {
  display: inline-block;
}

.btn-dgraph {
  border: 1px solid #d2d1d1;
  background-color: white;
  color: #8a8a8a;
}
