.r6o-relation-editor {
  position:absolute;
  font-family:'Lato', sans-serif;
  font-size:17px;
  line-height:27px;
  @include box-shadow(0, 1px, 14px, 0.4);
  @include rounded-corners(3px);
  transform:translate(-50%, -50%);
  background-color:#fff;

  svg {
    vertical-align:middle;
    shape-rendering: geometricPrecision;
  }

  * {
    box-sizing:border-box;
  }

  .input-wrapper {
    height:34px;
    padding:0 6px;
    margin-right:68px;
    font-size:14px;
    background-color:$blueish-white;
    cursor:text;
    @include rounded-corners-left(3px);

    div[role=combobox] {
      height:34px;
    }

    input {
      outline:none;
      border:none;
      width:80px;
      height:100%;
      line-height:14px;
      white-space:pre;
      box-sizing:border-box;
      background-color:transparent;
      font-size:14px;
      color:$standard-type;
    }

    ul {
      position:relative;
      left:-6px;
      margin:0;
      padding:0;
      list-style-type:none;
      background-color:#fff;
      min-width:100%;
      border-radius:3px;
      border:1px solid #d6d7d9;
      box-sizing:border-box;
      box-shadow:0 0 20px rgba(0,0,0,0.25);
    }

    li {
      box-sizing:border-box;
      padding:2px 12px;
      width:100%;
      cursor:pointer;
    }
  
  }

  .buttons {
    position:absolute;
    display:inline-flex;
    top:0;
    right:0;

    span {
      height:34px;
      display:inline-block;
      width:34px;
      text-align:center;
      font-size:14px;
      cursor:pointer;
      padding:1px 0;
    }

    .delete {
      background-color:#fff;
      color:$lightblue-type;
      border-left:1px solid $lightgrey-border;
    }

    .delete:hover {
      background-color:#f6f6f6;
    }

    .ok {
      background-color:$ocean;
      color:#fff;
      @include rounded-corners-right(3px);
    }

    .ok:hover {
      background-color:$ocean-hover;
    }

  }

}