.LSBox {
  .ui-autocomplete {
    @include screen-small {
      width: auto !important;
      right: -$line-height-base !important;
      left: auto !important;
      top: ($line-height-base + 3 * $padding-vertical) !important;

      &:after, &:before {
        visibility: visible !important;
      }
    }

    @include list-group-interactive;

    left: 0 !important;
    right: 0 !important;
    box-shadow: $box-shadow-secondary;
    width: 100% !important;
    border-radius: $border-radius-primary;

    &:before {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0px $line-height-base $line-height-base;
      border-color: transparent transparent darken($border-color-list-group, 15%);
      position: absolute;
      margin-top: -($line-height-base - em(1px));
      right: 0;
      top: 0;
      margin-right: $padding-horizontal;
    }

    &:after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 ($line-height-base - em(1px)) ($line-height-base - em(1px));
      border-color: transparent transparent $color-content-background;
      position: absolute;
      margin-top: -($line-height-base - em(2px));
      right: 0;
      top: 0;
      margin-right: $padding-horizontal + em(1px);
    }
  }
  .ui-menu-item {
    label {
      padding: 0;
    }

    > a {
      @include list-group-item-interactive;
      border-radius: 0;

      &:before {
        float: left;
      }

      &.ui-state-focus {
        @include list-group-item-interactive-select;
        background-image: none;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-color: $border-color-list-group;

        .description {
          @include auto-text-color($color-list-group-hover);
        }
      }

      &:hover {
        .description {
          @include auto-text-color($color-list-group-hover);
        }
      }
    }

    img {
      display: table-cell;
      float: left;
      margin-right: 0.2em;
    }

    .title {
      font-weight: bold;
    }

    .description {
      font-size: $font-size-small;
      color: $color-text-light;
    }

    .mimetype-icon {
      display: inline-block;
      float: left;
    }

    span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > .group {
      padding: $padding-vertical $padding-horizontal;
      display: block;
      background-color: $color-gray-dark;
      font-weight: bold;
    }
  }

  .no-result {
    text-align: center;
  }
}

