$crm-jquery-select2-arrow-width: 26px;
$crm-jquery-select2-line-height: 27px;
$crm-jquery-select2-search-items-padding: 5px;
$crm-jquery-select2-search-items-label-padding: 5px 10px;

// Single select2
.select2-container {
  // The input field overlay
  .select2-choice {
    background: $crm-white;
    border-color: $crm-grayblue-darker;
    border-radius: $border-radius-base;
    box-shadow: $crm-form-control-shadow;
    box-sizing: border-box;
    height: $input-height-base;
    line-height: $crm-jquery-select2-line-height;

    &:focus {
      outline: 0;
    }

    // The X icon to deselect the option
    abbr {
      background-image: none !important;
      right: $crm-jquery-select2-arrow-width + 4;
      top: 1px;

      &::before {
        @include fa-icon();
        color: $brand-primary;
        content: $fa-var-times-circle;
        font-size: $font-size-base;
      }
    }

    .select2-arrow {
      background: $crm-white;
      border-left-color: $crm-grayblue-darker;
      border-radius: 0 $border-radius-base $border-radius-base 0;
      text-align: center;
      width: $crm-jquery-select2-arrow-width;

      &::before {
        @include fa-icon();
        color: $gray-darker;
        content: $fa-var-caret-down;
        font-size: $font-size-base;
        position: relative;
        top: -1px;
        vertical-align: middle;
      }

      // The original arrow icon
      b { /* stylelint-disable-line selector-max-compound-selectors */
        display: none;
      }
    }

    // The selected option
    > .select2-chosen {
      font-size: $font-size-base;
    }
  }
}

// Multiple select2
.select2-container-multi {
  // Use the magnifying glass icon when fetching data via ajax
  &.crm-ajax-select {
    .select2-choices {
      &::before {
        content: $fa-var-search;
        right: 0;
        top: 0;
      }
    }
  }

  // Wrapper
  .select2-choices {
    background: $crm-white;
    border-color: $crm-grayblue-darker;
    border-radius: $border-radius-base;
    box-shadow: $crm-form-control-shadow;
    line-height: $crm-jquery-select2-line-height;
    padding-right: 20px;

    // By default use a caret down icon, without borders
    &::before {
      @include fa-icon();
      background: none;
      color: $gray-darker;
      content: $fa-var-caret-down;
      font-size: $font-size-base;
      right: -3px;
      top: 1px;
    }

    // The selected option
    .select2-search-choice {
      background: none;
      border-color: $brand-primary;
      border-radius: $border-radius-base;
      font-size: $font-size-base;
      padding: 3px 25px 3px 5px;

      &.select2-search-choice-focus {
        background: $gray-light;
      }

      /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
      .select2-search-choice-close {
        background: none !important;
        left: auto;
        right: 4px;
        top: 4px;

        &::before {
          @include fa-icon();
          background: none;
          color: $brand-primary;
          content: $fa-var-times-circle;
          font-size: $font-size-base;
          top: 1px;
        }

        &:hover {
          &::before {
            color: darken($brand-primary, $crm-darken-percentage);
          }
        }
      }
      /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */
    }

    // The input field overlay
    .select2-search-field {
      /* stylelint-disable selector-max-compound-selectors */
      input {
        font-family: $font-family-base;
        // These !important are necessary to counteract Bootstrap's base style
        // when select2 is used inside the bootstrap namespace
        font-size: $font-size-base !important;
        line-height: normal !important;
        margin: 0;
        padding: 4px 4px 6px 8px;

        // Spinner icon that appears when fetching data via ajax
        &.select2-active { /* stylelint-disable-line max-nesting-depth, selector-no-qualifying-type */
          background-position: center right 20px !important;
        }
      }
      /* stylelint-enable selector-max-compound-selectors */
    }
  }
}

// The state of both single and multiple select2 when open
.select2-dropdown-open {
  .select2-choice,
  .select2-choices {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: $input-border-focus;
    box-shadow: none;
  }

  // Only for single select2, when open the arrow points up
  .select2-choice {
    .select2-arrow {
      &::before {
        content: $fa-var-caret-up;
      }
    }
  }
}

// The select2 dropdown is appended right before </body>
#{$outside-namespace-marker} {
  // The dropdown list
  .select2-drop.select2-drop-active.crm-container {
    background: $crm-white;
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    border-color: $input-border-focus;

    // CiviCRM-specific "refine search" controls
    .crm-entityref-filters {
      /* stylelint-disable selector-max-compound-selectors */
      select,
      input {
        background: $crm-white;
        border-color: $crm-grayblue-darker;
        box-sizing: border-box;
        height: $input-height-base;
      }
      /* stylelint-enable selector-max-compound-selectors */
    }

    // The list of items that match the search
    .select2-results {
      /* stylelint-disable selector-max-compound-selectors */
      li {
        color: $gray-dark;
        padding: $crm-jquery-select2-search-items-padding;
      }

      // Class applied to an item when hovered
      .select2-highlighted {
        background: $gray-light;

        p { /* stylelint-disable-line max-nesting-depth */
          color: $gray-dark;
        }
      }

      .select2-result-label {
        padding: $crm-jquery-select2-search-items-label-padding;
      }
      /* stylelint-enable selector-max-compound-selectors */
    }
  }

  // Search text input field
  .select2-search {
    &::after {
      @include fa-icon();
      color: $gray-darker;
      content: $fa-var-search;
      font-size: $font-size-base;
      position: relative;
      right: 20px;
    }

    input {
      background-image: none !important;
      border-color: $input-border-focus;
      font-family: $font-family-base;
      line-height: 20px;
    }
  }

  .select2-results {
    .select2-ajax-error,
    .select2-no-results,
    .select2-searching,
    .select2-selection-limit {
      background: $crm-white;
    }

    .Individual-icon,
    .Household-icon,
    .Organization-icon {
      background: none;
      text-indent: 0;

      &::before {
        display: block;
        font-family: 'FontAwesome';
        // Align with the original icon position
        font-size: $font-size-medium;
      }
    }

    .Individual-icon::before {
      content: $fa-var-user;
      margin-left: 2px;
    }

    .Household-icon::before {
      content: $fa-var-home;
      margin-left: 0;
    }

    .Organization-icon::before {
      content: $fa-var-building;
      margin-left: 1px;
    }
  }
}