@import "defaults";
@import "../../mixins/gradients";

.select2-container--pathfinder {
  @import "single";
  @import "multiple";

  .select2-search--dropdown {
    .select2-search__field {
      border: 1px solid $border-color;
      outline: 0;
    }
  }

  .select2-search--inline {
    .select2-search__field {
      outline: 0;
      @include placeholder();
    }
  }

  .select2-dropdown {
    background-color: $dropdown-bg-color;
    border: 1px solid transparent;
    overflow: hidden;
    @include box-shadow(0 6px 12px rgba(0,0,0, 0.3));

    img{
      image-rendering: -webkit-optimize-contrast;
      width: 21px;
    }
  }

  .select2-dropdown--above {
    border-bottom: none;
  }

  .select2-dropdown--below {
    border-top: none;
  }

  .select2-results {
    max-height: $results-max-height;
    overflow-y: auto;
  }

  .select2-results__option {
    padding: 3px 6px;
    min-height: 24px;  // options with empty string '' should not collapse

    &[role=group] {
      padding: 0;
    }

    &[aria-disabled=true],
    &[aria-selected=true]{
      color: $results-choice-fg-unselectable-color;
      background-color:  $results-choice-bg-unselectable-color;

      // add a icon to all "disabled" options
      .pf-select-item-anchor {
        padding-left: 15px; // leave space for :before icon

        &:before {
          content: "\f05e";
          font-family: "Font Awesome 5 Free";
          font-weight: bold;
          font-size: 9px;
          position: absolute;
          left: 2px;
          top: 0;
          color: $gray-light;
        }
      }
    }
  }

  .select2-results__option--highlighted[aria-selected] {
    background-color: $results-choice-bg-hover-color;
    color: $results-choice-fg-hover-color;
  }

  .select2-results__group {
    cursor: default;
    display: block;
    padding: 3px 6px;
    background-color: $gray;
    text-transform: capitalize;
  }

  &.select2-container--open .select2-dropdown {
    border-color: $focus-border-color;
  }

  &.select2-container--disabled {
    .select2-selection {
      background-color: $gray;
      cursor: not-allowed;
      border: 1px solid $gray-light;

      .select2-selection__arrow{
        background-color: $gray;
      }

      .select2-selection__clear{
        display: none;
      }
    }
  }
}

// hide small "arrow" for hidden select elements
select.select2-hidden-accessible {
  @include appearance( none );
}

select[readonly].select2-hidden-accessible {
  + .select2-container {
    pointer-events: none;
    touch-action: none;

    .select2-selection {
      background-color: $gray;

      .select2-selection__arrow{
        background-color: $gray;
      }

      .select2-selection__clear{
        display: none;
      }
    }
  }
}
