@import "../../styles/variables.scss";

novo-picker {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-bottom: 5px;
  transition: all 200ms ease-in-out;
  position: relative;
  &.selected,
  &.selected:hover {
    & + i {
      color: $positive;
    }
  }
  padding-bottom: 0;
  &.ng-touched.ng-invalid:not(.ng-pristine) {
    > input,
    > input:hover,
    > input:focus {
      border-bottom-color: transparent !important;
    }
  }
  input {
    font-size: 1em;
    background: transparent !important;
    border: none;
    border-bottom: 1px solid lighten($dark, 45%);
    border-radius: 0;
    outline: none;
    height: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 300ms;
    color: #26282b;
    &:hover {
      border-bottom: 1px solid lighten($dark, 15%);
    }
    &:focus {
      border-bottom: 1px solid $positive;
    }
    &:invalid {
      border-bottom: 1px solid #da4453;
    }
    &.entity-picker {
      padding-left: 2em;
    }
    &.entity-selected {
      padding-left: 2.5em;
      background: $off-white !important;
    }
    &:disabled {
      border-bottom: 1px dashed lighten($dark, 45%) !important;
    }
  }
  i.bhi-more {
    position: absolute;
    left: 0;
    top: 2px;
    background: $off-white;
    font-size: 1em;
    border-radius: 3px;
    padding: 3px;
  }
  i.entity-icon {
    position: absolute;
    left: 5px;
    top: 3px;
    font-size: 1em;
    border-radius: 3px;
    padding: 3px;
    color: $white;

    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      &.#{$name} {
        background: $color;
      }
    }
  }
  i.bhi-search,
  i.bhi-times {
    position: absolute;
    right: 0;
    color: $dark;
    &.entity-selected {
      right: 5px;
    }
  }
  i.bhi-search {
    top: 0px;
    font-size: 1.2rem;
  }
  i.bhi-times {
    top: 0px;
    cursor: pointer;
    font-size: 1.2rem;
  }
}