@import "~choices.js/src/styles/choices";

.choices {
  .choices__inner {
    position: relative; // used to place fake select
    background: #ffffff;
    border-radius: .35rem;
    padding: 4px .75rem;
    border-color: $input-border-color;
    min-height: 38px;
    // properly place our hidden field
    select.aa-ft-rich-entity {
      position: absolute;
      top: 0;
    }

    .choices__list--single {
      padding: 0;
      font-size: 1rem;
      line-height: 1.5;
    }

    .choices__button:focus {
      box-shadow: 0 0 0 0.2rem $input-btn-focus-color;
    }

    .choices__input {
      background: transparent;
      margin: 0;
      padding: 0;
      height: 24px;
    }

    .choices__list--multiple {
      display: inline-block;

      .choices__item {
        background-color: #F0F2FF;
        border: 1px solid #F0F2FF;
        color: #3444BF;
        margin-right: 4px;
        margin-bottom: 0;
        padding: 2px 10px;
        font-size: 14px;
        border-radius: .35rem;

        .choices__button {
          border: 0;
          position: relative;
          background-size: 10px;
          margin: 0;
          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMzQ0NEJGIj48cGF0aCBkPSJNMjU2IDUxMmMxNDEuNCAwIDI1Ni0xMTQuNiAyNTYtMjU2UzM5Ny40IDAgMjU2IDBTMCAxMTQuNiAwIDI1NlMxMTQuNiA1MTIgMjU2IDUxMnpNMTc1IDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMGw0NyA0NyA0Ny00N2M5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjlsLTQ3IDQ3IDQ3IDQ3YzkuNCA5LjQgOS40IDI0LjYgMCAzMy45cy0yNC42IDkuNC0zMy45IDBsLTQ3LTQ3LTQ3IDQ3Yy05LjQgOS40LTI0LjYgOS40LTMzLjkgMHMtOS40LTI0LjYgMC0zMy45bDQ3LTQ3LTQ3LTQ3Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiLz48L3N2Zz4=");
        }
      }
    }
  }

  &.is-focused .choices__inner {
    @include form-control-focus-rules();
  }

  .choices__list--dropdown {
    z-index: 101;
    word-break: unset;
    min-width: 100px;
    white-space: nowrap;

    .choices__item--selectable {
      padding-right: 10px;
      &.is-selected {
        background-color: #f2f2f2;
        color: #858796;
      }

      &.is-highlighted {
        background-color: #3444BF;
        color: #fff;
      }
    }

    &.is-active {
        position: relative;
        .choices__list {
            max-height: 125px;
        }
    }
  }
}
