%select2-focus {
  border-color: var(--input-focus-border-color, $input-focus-border-color);
  transition: border-color 0.2s;
  box-shadow: 0px 0px 5px 1px var(--input-focus-border-color, $input-focus-border-color);
  transition: box-shadow 0.2s;
}

.select2 {
  width: 100% !important;
}

ui-field-wrapper {
  .select2-container {
    border-top: unset;
    border-bottom: unset;
    border-left: unset;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
  }
}

.select2-container {
  min-height: 32px;
  border: solid;
  border-width: 1px;
  border-radius: $ui-input-border-radius;
  border-top-right-radius: $ui-input-border-radius;
  border-bottom-right-radius: $ui-input-border-radius;
  background-color: $base-component-bg;
  border-color: rgba($base-border-color, 1);
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  .select2-search--inline .select2-search__field {
    font-size: 100%;

    &::placeholder {
      color: #999;
      font-family: "Nunito Sans", sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
  }
  .select2-selection--single {
    height: 30px;
    padding: 0 0.5rem;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    .select2-selection__placeholder {
      color: $input-color;
    }
    .select2-selection__rendered {
      height: 100%;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 20px !important;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 20px;
      font-size: 16px;
      color: $input-color;
      .select2-selection__clear {
        font-size: 18px;
        font-weight: normal;
        padding-right: 5px;
        color: $gray;
        opacity: 0.5;
        height: auto !important;
        &:hover {
          opacity: 1;
        }
      }
    }
    .select2-selection__arrow {
      height: 100%;
      right: 0.5em;
    }
  }
  .select2-selection--multiple {
    min-height: 30px;
    padding: 0 0.5rem;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    .select2-selection__placeholder {
      color: $input-color;
    }
    .select2-selection__rendered {
      height: 100%;
      display: inline-block;
      overflow: hidden;
      padding-left: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $input-color;
      .select2-selection__clear {
        font-size: 18px;
        font-weight: normal;
        padding-right: 5px;
        margin: 8px 0 4px 0;
        color: $gray;
        opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
      .select2-search--inline {
        .select2-search__field {
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    }
    .select2-selection__choice {
      margin-top: 5px;
      padding: 3px 5px;
      color: $white;
    }
    .select2-selection__choice__remove {
      margin: 0;
      background-color: $white;
      border-radius: 30px;
      line-height: 14px;
      width: 14px;
      text-align: center;
      font-size: 16px;
      &:hover {
        color: $gray !important;
      }
    }
  }
  .select2-search__field {
    height: $ui-select-search-field-height;
    line-height: $ui-select-search-field-height;
    color: $input-color;
  }
  .select2-dropdown {
    box-shadow: $shadow-level3;
    border-radius: 5px;
    .select2-search--dropdown {
      padding: 5px 10px;
      border-bottom: solid 1px $gray-50;
      .select2-search__field {
        border-bottom: none;
        &:focus {
          box-shadow: none !important;
          border: transparent !important;
        }
      }
    }
    .select2-results__options {
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      background-color: $white;
      .select2-results__option {
        color: $input-color;
        line-height: 1.5rem;
        font-size: 16px;
        padding: 10px;
        /**
          * Disabled options
          */
        &[aria-disabled="true"] {
          cursor: not-allowed;
        }
        /**
          * Selected option
          */
        &[aria-selected="true"] {
          color: rgba($input-color, 0.5);
          background-color: rgba($gray, 0.25);
        }
        /**
          * Active/hovered option
          */
        &.select2-results__option--highlighted[aria-selected] {
          background-color: $gray-15;
          color: $black;
        }
      }
    }
    .select2-create-button {
      line-height: 2.5rem;
      display: block;
      color: $input-color;
      border-top: 1px solid var(--primary, $primary);
      padding-left: 10px;
      background-color: var(--primary-50, rgba($primary, 0.5));
      cursor: pointer;
      > span {
        vertical-align: middle;
      }
      > i {
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
  &.select2-container--default {
    .select2-selection--multiple {
      background-color: transparent;
    }
    &.invalid {
      .select2-selection {
        border-bottom: 1px solid $danger;
        box-shadow: 0 1px 0 0 $danger;
      }
    }
  }
  /**
    * Focused textbox
    */
  &.select2-container--focus {
    .select2-selection {
      @extend %select2-focus;
    }
  }
  /**
    * Opened textbox
    */
  &.select2-container--open {
    .select2-selection {
      @extend %select2-focus;
    }
  }

  /**
    * Disabled textbox
    */
  &.select2-container--disabled {
    cursor: not-allowed;
    .select2-selection--single {
      background-color: $black-4;
      cursor: not-allowed;
      .select2-selection__rendered {
        cursor: not-allowed;
        background-color: $black-4;
      }
    }
    .select2-selection--multiple {
      background-color: $black-4;
      cursor: not-allowed;
      .select2-selection__rendered {
        cursor: not-allowed;
        background-color: $black-4;
      }
    }
    &.select2-container--focus {
      .select2-selection {
        box-shadow: none;
      }
    }
  }
}

.select2-dropdown {
  background-color: $white;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.select2-container--open {
  .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
  }
  .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);

    .ui-btn__wrapper {
      padding: 5px;
    }

    .ui-check__wrapper {
      border-bottom: 1px solid #e9e9e9;
      padding: 5px;
    }
  }
}

.select2-close-mask {
  border: 0;
  opacity: 0;
  background-color: $white;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
}

.select2-container--default {
  .select2-selection--single {
    background-color: transparent;
    border: 1px solid #aaa;
    border-radius: 4px;
    border: none;
    border-radius: 0;
    .select2-selection__rendered {
      color: #444;
    }
    .select2-selection__clear {
      font-weight: bold;
    }
    .select2-selection__arrow {
      b {
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
      }
    }
  }
  .select2-selection--multiple {
    background-color: $white;
    border: 1px solid #aaa;
    border-radius: 4px;
    border: none;
    border-radius: 0;
    .select2-selection__clear {
      font-weight: bold;
    }
    .select2-selection__choice {
      border: 1px solid #aaa;
      border-radius: 4px;
      border: none;
      background-color: var(--primary, $primary);
      color: var(--primary-reverse, set-color($primary));
    }
    .select2-selection__choice__remove {
      color: #999;
      font-weight: bold;
      &:hover {
        color: #333;
      }
    }
  }
  .select2-search--dropdown {
    .select2-search__field {
      border: 1px solid #aaa;
    }
  }
  .select2-search--inline {
    .select2-search__field {
      background: transparent;
      border: none !important;
      box-shadow: none;
    }
  }
  .select2-results__option[aria-disabled="true"] {
    color: #999;
  }
  .select2-results__option[aria-selected="true"] {
    background-color: #ddd;
  }
  .select2-results__option--highlighted[aria-selected] {
    color: white;
    background-color: #42a5f5;
  }
}

.select2-container--default.select2-container--disabled {
  .select2-selection--single {
    .select2-selection__rendered {
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .select2-selection--multiple {
    .select2-selection__rendered {
      color: rgba(0, 0, 0, 0.5);
    }
  }
}

.select2-container--default.select2-container--open {
  .select2-selection--single {
    .select2-selection__arrow {
      b {
        border-color: transparent transparent #888 transparent;
        border-width: 0 4px 5px 4px;
      }
    }
  }
}

.select2-container--default.select2-container--open.select2-container--above {
  .select2-selection--single {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.select2-container--default.select2-container--open.select2-container--below {
  .select2-selection--single {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.select2-container--classic {
  .select2-selection--single {
    background-color: $black-3;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
    &:focus {
      border: 1px solid #5897fb;
    }
    .select2-selection__rendered {
      color: #444;
    }
    .select2-selection__clear {
      font-weight: bold;
    }
    .select2-selection__arrow {
      background-color: #ddd;
      border: none;
      border-left: 1px solid #aaa;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
      background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
      background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
      b {
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
      }
    }
  }
  .select2-selection--multiple {
    background-color: $white;
    border: 1px solid #aaa;
    border-radius: 4px;
    &:focus {
      border: 1px solid #5897fb;
    }
    .select2-selection__choice {
      background-color: #e4e4e4;
      border: 1px solid #aaa;
      border-radius: 4px;
    }
    .select2-selection__choice__remove {
      color: #888;
      &:hover {
        color: #555;
      }
    }
  }
  .select2-search--dropdown {
    .select2-search__field {
      border: 1px solid #aaa;
    }
  }
  .select2-search--inline {
    .select2-search__field {
      box-shadow: none;
    }
  }
  .select2-dropdown {
    background-color: $white;
    border: 1px solid transparent;
  }
  .select2-dropdown--above {
    border-bottom: none;
  }
  .select2-dropdown--below {
    border-top: none;
  }
  .select2-results__option[aria-disabled="true"] {
    color: $black-50;
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: #3875d7;
    color: $white;
  }
}

.select2-container--classic[dir="rtl"] {
  .select2-selection--single {
    .select2-selection__arrow {
      border: none;
      border-right: 1px solid #aaa;
      border-radius: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
  }
}

.select2-container--classic.select2-container--open {
  .select2-selection--single {
    border: 1px solid #5897fb;
    .select2-selection__arrow {
      background: transparent;
      border: none;
      b {
        border-color: transparent transparent #888 transparent;
        border-width: 0 4px 5px 4px;
      }
    }
  }
  .select2-selection--multiple {
    border: 1px solid #5897fb;
  }
  .select2-dropdown {
    border-color: #5897fb;
  }
  &.select2-container--above {
    .select2-selection--single {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
      background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
      background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
    }
    .select2-selection--multiple {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &.select2-container--below {
    .select2-selection--single {
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
      background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
      background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
    }
    .select2-selection--multiple {
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

.select2-container--default.select2-container--focus {
  .select2-selection--multiple {
    border: none;
    border-radius: 0;
  }
}

div.tagsinput {
  span.tag {
    background-color: #42a5f5;
  }
}

.ui-enumeration-select {
  &.ui-select .select2-container {
    .select2-selection--single {
      .select2-selection__rendered {
        .ui-tag {
          margin-top: -5px;
          margin-bottom: 0px;
        }
      }
    }
  }

  &-footer {
    ui-button {
      width: 100%;
      margin: 0;
      div {
        border-radius: 0 0 5px 5px;
        a {
          padding: 5px;
          .ui-icon {
            font-size: 1em;
          }
        }
      }
    }
  }

  &.ui-select.ui-input--readonly {
    background: none;
    border-color: transparent;
    padding-left: 0.25rem;
    .select2-container {
      span.select2-selection--single {
        background: none;
        .select2-selection__rendered {
          background: none;
          .ui-tag {
            margin-left: 0;
          }
        }
      }
    }
  }
}

.ui-select.ui-input--disabled,
.ui-select.ui-input--readonly {
  background-color: $black-4;
  & .select2-container.select2-container--disabled {
    & span.select2-selection--single {
      & .select2-selection__rendered,
      & .select2-selection__placeholder {
        color: $gray-80;
      }
    }
  }
}

.ui-select.ui-input--disabled {
  border: 1px solid $gray-50;
}

.ui-select.ui-input--readonly {
  border: none;
  border-bottom: solid 1px $gray-50;
  border-radius: 0;
}

ui-field:not(.ui-field--empty) .ui-select.ui-input--readonly {
  &.ui-select--multiple {
    background: none;
    border: none;
    padding-left: 0;
  }
  & .select2-container.select2-container--disabled {
    & span.select2-selection--single {
      & .select2-selection__rendered,
      & .select2-selection__placeholder {
        color: #1d1d1d;
      }
    }

    & span.select2-selection--multiple {
      background: none;
      & .select2-search--inline .select2-search__field {
        color: #1d1d1d;
      }
      & .select2-selection__rendered {
        background: none;
      }
    }
  }
}
