//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-input-list {
  .ui-dropdown-handle {
    cursor     : pointer;
    font-size  : 0.8em;
    line-height: 1.5rem;
    opacity    : 0.5;

    .ui-icon {
      margin: 0;
    }

    &:hover {
      opacity: 0.8;
    }
  }

  .ui-list-container {
    max-height: 10rem;

    .ui-lang-item {
      @include flex-row($wrap: false);

      > .ui-list-item {
        @include flex(1 1 auto);
      }

      .ui-icon {
        cursor: pointer;
        @include flex-auto();

        &.ui-invalid {
          margin       : 0 0.2em;
          border-radius: 1em;
          color        : $white;
          background   : $warning;
        }
      }
    }
  }

  .ui-tag-item {
    background   : darken($input-bg, 1%);
    border-radius: $base-border-radius;
    border       : 1px solid rgba($base-border-color, .5);
    position     : relative;
    // max-width    : 10em;
    font-size    : 0.8em;
    margin       : 0.15rem 0.2em;
    @include flex-row($wrap:false);
    @include flex-auto();

    > span {
      @include flex(1 1 auto);
      @include ellipsis();
      line-height: 1.5;
      padding    : 0 0.25em;
    }

    .ui-clear {
      line-height: 1em;
      padding    : 0 0.25em;
      @include flex-auto();
    }
  }

  &.tags {
    &,
    & > .ui-input-control {
      @include flex-wrap(wrap);
    }
  }

  &.listbox {
    @include flex-wrap(wrap);

    .ui-input.ui-remove {
      position: absolute;
      top     : -100%;
    }

    .ui-list-container {
      background: none;
      // border-top: 1px solid rgba($base-border-color, .3);
      @include flex(1 1 100%);
    }
  }

  &.reorder {
    .ui-list-container {
      background: none;
      position  : relative;
      @include flex(1 1 100%);
    }

    .ui-list-item {
      cursor : move;
      padding: 0;
      @include flex-row($align:center, $wrap: false);

      > .ui-icon {
        fill  : $muted;
        margin: 0 0.5em;
      }

      &:hover {
        background: none;
      }

      &.dragging {
        visibility: hidden;
      }

      > .ui-icon {
        // cursor: pointer;
      }
    }

    .ui-ghost {
      color     : $list-hover-text;
      background: $list-hover-bg !important;
      border    : 1px dotted $secondary;
      position  : absolute;
      left      : 0;
      right     : 0;

      > .ui-icon {
        fill: $list-hover-text;
      }
    }
  }
}