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

.ui-input-list {
  .ui-dropdown-handle {
    cursor : pointer;
    opacity: 0.5;

    .ui-icon {
      margin   : 0;
      font-size: 0.8em;
    }

    &:hover {
      opacity: 0.8;
    }
  }

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

    .ui-list-item u {
      font-weight: $font-weight-medium;
      color      : $primary;
    }

    .ui-list-item {
      @include flexbox($wrap: false, $align:center);
      padding    : 0.5em;
      line-height: 1.25;

      small {
        color: $muted;
      }

      &.ui-selected,
      &.ui-hilight {
        small {
          color: $list-hover-text;
        }
      }
    }

    .ui-lang-item {
      @include flexbox($wrap: false, $align:center);

      > .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.85em;
    margin       : 0.4em 0.2em;
    @include flexbox($wrap:false, $align: center);
    @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();
    }
  }

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

      > input:focus {
        @include flex-basis(6em);
      }
    }
  }

  &.ui-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%);
    }

    &.ui-readonly .ui-list-container {
      pointer-events: none;
    }
  }

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

    .ui-list-item {
      cursor : move;
      padding: 0;
      @include flexbox($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;
      }
    }
  }
}