@import (reference) "../defs.less";


/***************************************************************************
 * Related object autocomplete
 ***************************************************************************/

.related-object-options,
.related-object-selected {
  font-size: @widget_font_size;

  img {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    vertical-align: top;
  }

  span {
    line-height: 20px;
    vertical-align: top;
  }

  .title {
    display: inline-block;
    min-width: 20em;
    font-size: @widget_font_size;
  }

  .description {
    display: inline-block;
    font-size: (@widget_font_size * 0.9);
    padding: 0;
  }
}

.related-object-selector {
  vertical-align: middle;

  .related-object-selected {
    border: 1px solid #b8b8b8;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8);
    list-style: none;
    margin: 0.5em 0 0 0;
    max-height: 20em;
    min-height: 3em;
    overflow-y: auto;
    padding: 0;

    li {
      cursor: default;
      padding: 5px 8px; // To match the selectize style in the drop-down menu.
      vertical-align: middle;

      div {
        display: inline-block;
      }

      .fa-close {
        color: #ccc;
        cursor: pointer;
        float: right;

        &:hover {
          color: black;
        }
      }
    }
  }

  .selectize-input {
    font-size: @widget_font_size;
    padding: 4px;

    &::after {
      right: 10px;
    }

    input {
      width: 100% !important;
      /* To overwrite the measureString() return value,
      which seems to  be broken in selectize-0.12.1 */
    }
  }
}
