.r6o-relation-editor {
  position:absolute;
  @include box-shadow(0, 1px, 14px, 0.4);
  @include rounded-corners(3px);
  transform:translate(-50%, -50%);
  background-color:#fff;

  * {
    line-height:31px;
    box-sizing:border-box;
  }

  .input {
    height:34px;
    display:block;
    padding:1px 6px;
    margin-right:68px;
    font-size:15px;
    min-width:80px;
    outline:none;
    background-color:#fff;
    cursor:text;
    @include rounded-corners-left(3px);
  }

  .input:empty:before {
    content:attr(data-placeholder);
    color:darken($lightgrey-border-darker, 15%);
  }

  .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:$standard-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;
    }

  }

}