// NG Select
// https://github.com/ng-select/ng-select

$custom-select-arrows: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");


.ng-select {
  @extend %flex-1,
          %d-flex;

  .ng-select-container {
    @extend %form-control,
            %ml-0;

    .ng-placeholder {
      @extend .position-absolute;

      color: $input-placeholder-color;
    }

    .ng-input {
      @extend %position-relative;

      input {
        @extend %p-0;
        color: $input-color;

        &:focus {
          outline: 0;
        }
      }
    }
  }

  &.disabled,
  &.ng-select-disabled {
    .ng-select-container {
      background-color: $input-disabled-bg !important;
    }
  }

  &.ng-select-sm .ng-select-container {
    @extend %form-control-sm;
  }

  &.ng-select-focused {
    .ng-select-container {
      @include x-form-control-focus;

      z-index: 3;
    }
  }

  // Overflow auto for ng-select-multiple
  &.ng-select-multiple {
    .ng-select-container {
      @extend .overflow-auto;
    }

    .ng-value-container {
      align-items: baseline;
    }

    .ng-value {
      // Preventing badge from shrinking
      height: calc(#{$input-line-height-sm * 1rem} - 2px);
      margin-bottom: 2px;
    }

    .ng-arrow-wrapper,
    .ng-clear-wrapper {
      display: none;
    }
  }

  .ng-has-value .ng-placeholder {
    @extend %d-none;
  }
}

.x-select-truncate .ng-value {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ng-value {
  .ng-select-multiple & {
    @extend %mr-2,
            %p-0,
            %x-badge-tag,
            %badge-light;
  }

  .ng-select-single & {
    @extend %position-absolute;
  }

  color: $input-color;
}

.ng-dropdown-panel {
  @extend %zindex-dropdown;


  &.ng-select-bottom {
    top: 100%;
    margin-left: 6px;
  }

  &.ng-select-top {
    bottom: 100%;
  }

  .ng-dropdown-panel-items {
    @extend .w-100,
            %py-0,
            %list-group,
            %list-group-flush,
            .dropdown-menu,
            .show;

    max-height: 30vh !important;

    .ng-option {
      @extend %white-space-normal,
              .dropdown-item,
              %list-group,
              %list-group-item-action,
              %px-3,
              %py-2,
              .border-top;
      &.ng-option-selected {
        background-color: $x-row-selected-color;
      }

      &:hover,
      &.ng-option-marked {
        background-color: $x-row-hover-color;
      }

      &:last-child:not(:first-child):not(.selected) {
        // @extend .border-top;
      }
    }
  }
}

.ng-select-disabled {
  .ng-select-container {
    background-color: $input-disabled-bg;
  }
}

.ng-select {
  &.x-select {
    min-width: 0 !important;
  }
}

.ng-dropdown-panel {
  &.x-min-width-360 {
    min-width: 360px !important;
  }
}


.ng-dropdown-header {
  @extend %bg-light-secondary,
          .w-100,
          %py-2,
          %d-flex,
          %justify-content-end;

  padding-left: $dropdown-item-padding-x;
  padding-right: $dropdown-item-padding-x;
  margin-bottom: -1px;
  border-left: 1px solid $dropdown-border-color;
  border-right: 1px solid $dropdown-border-color;
}


.ng-clear-wrapper,
.ng-arrow-wrapper {
  width: 1rem;
}

.ng-clear-wrapper {
  text-align: right;
}

.ng-arrow-wrapper {
  background: $custom-select-arrows right center/8px 10px no-repeat;
}

// Removes arrows on input groups
.x-input-group,
.input-group {
  .ng-select .ng-arrow-wrapper {
    display: none;
  }
}