/**
 * Tom Select field styling for the registration wizard (AL-1046 item 4).
 *
 * Two jobs: give the control a chevron affordance instead of the jQuery UI
 * throbber, and undo what the control inherits from the theme. The classes Tom
 * Select copies from the original input are stripped in JS - see
 * registration-tomselect.js - so what is left here is the wrapper the theme
 * generated itself.
 */

/**
 * The theme pins the widget's container to the height of a bare text input
 * (`.form--fancy .input-group { height: 28px }`), while the Tom Select control
 * inside it is taller. The container did not grow, so the control overflowed it
 * and ran into the next field's label.
 *
 * Scoped through .registration-wizard--js purely for specificity: the theme's
 * rule is two classes deep and its stylesheet loads after this module's, so an
 * equally specific selector here would lose on source order.
 */
.registration-wizard--js .registration-wizard__autocomplete.input-group {
  height: auto;
}

.registration-wizard__autocomplete .ts-wrapper {
  position: relative;
}

/* Above the following fields' controls, which the theme puts at z-index 2. */
.registration-wizard__autocomplete .ts-dropdown {
  z-index: 100;
}

/**
 * The theme's autocomplete throbber, left behind now that jQuery UI
 * autocomplete has been torn off the input - it is absolutely positioned over
 * the right-hand end of the control, where the chevron goes.
 */
.registration-wizard__autocomplete > .input-group-addon {
  display: none;
}

/**
 * Static down-chevron in place of the throbber, hidden while a remote lookup
 * is actually in flight (Tom Select adds .loading to the wrapper).
 */
.ts-wrapper:not(.loading)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.ts-wrapper.dropdown-active:not(.loading)::after {
  transform: translateY(-30%) rotate(-135deg);
}

.ts-wrapper .ts-control {
  padding-right: 32px;
}