ui-dropdown-input {
  position: relative;
  display: block;
  text-align: left;
  z-index: 0;
  &:hover {
    .ui-dropdown-input-clean:not(.ui-hide) {
      display: table-cell;
      vertical-align: middle;
    }
  }
  .ui-dropdown-input {
    width: 100%;
    text-align: inherit;
    padding-right: 1.4em;
  }
}

.ui-dropdown-input-arrow {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  transition: transform .15s;
  pointer-events: none;
  &.ui-open {
    transform: rotateZ(180deg);
  }
}

.ui-dropdown-input-clean {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  padding-left: 2px;
  font-size: 12px;
  display: none;
  > span {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    display: table-cell;
    width: 14px;
    height: 14px;
    background-color: $color-gray;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    &:before {
      vertical-align: middle;
      position: relative\0;
      top: -2px\0;
    }
    &:hover {
      background-color: $color-gray-dark;
    }
  }
  &.ui-hide {
    display: none;
  }
}

ui-dropdown {
  &.ui-focus {
    > ui-dropdown-input > .ui-dropdown-input:not([disabled]) {
      @include input-focus($form-control-border-color-primary);
    }
  }
  &.ui-open {
    > ui-dropdown-input > .ui-dropdown-input-arrow {
      transform: rotateZ(180deg);
    }
  }
}