/* Kisaka dropdowns on the apply form (js/kisaka-select.js). The button is
   sized like the text fields beside it; the list is the careers filter
   dropdown's: white, a hairline, 12px corners, a soft drop shadow, the
   chosen option in red. */
.kisaka-select
   {
      position: relative;
      width: 100%;
   }

/* The real select stays for the form, out of sight and out of reach. */
.kisaka-select .kisaka-select__native
   {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      border: 0 !important;
      opacity: 0;
      pointer-events: none;
   }

.kisaka-select.is-open
   {
      z-index: 30;
   }

.kisaka-select__trigger
   {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 49px;
      margin: 0;
      padding: 12px 40px 12px 14px;
      border: 1px solid #d8dde7;
      border-radius: 8px;
      background: #fff;
      color: var(--job-ink, #2C2D3F);
      font-family: inherit;
      font-size: 0.9375rem;
      line-height: 1.5;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: border-color 160ms ease, box-shadow 160ms ease;
   }

@media (hover: hover) and (pointer: fine)
   {
      .kisaka-select__trigger:hover
         {
            border-color: #c9cdd8;
         }
   }

.kisaka-select__trigger:focus-visible,
.kisaka-select.is-open .kisaka-select__trigger
   {
      outline: none;
      border-color: rgba(203, 31, 52, 0.55);
      box-shadow: 0 0 0 3px rgba(203, 31, 52, 0.12);
   }

.kisaka-select__trigger:disabled
   {
      background: #f6f7fb;
      color: var(--job-muted, #7c8494);
      cursor: not-allowed;
   }

.kisaka-select__value
   {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

/* Nothing picked yet: the prompt ("Choose one", "Grade") reads as a prompt. */
.kisaka-select.is-empty .kisaka-select__value
   {
      color: var(--job-muted, #7c8494);
   }

/* nice-select's caret: a rotated square border, the careers filter's weight. */
.kisaka-select__chevron
   {
      position: absolute;
      top: 50%;
      right: 17px;
      width: 7px;
      height: 7px;
      margin-top: -5px;
      border-right: 2px solid #8b8f9b;
      border-bottom: 2px solid #8b8f9b;
      transform: rotate(45deg);
      transition: transform 200ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      pointer-events: none;
   }

.kisaka-select.is-open .kisaka-select__chevron
   {
      transform: translateY(3px) rotate(225deg);
   }

/* Red outline when form-validate.js finds it empty, like every other field. */
.kisaka-vfield-wrap--error .kisaka-select__trigger
   {
      border-color: #cb1f34;
      box-shadow: 0 0 0 1px rgba(203, 31, 52, 0.22);
   }

/* ----- The list -----
   Grows from the edge it hangs off, so it reads as coming out of the field:
   200ms in on the site's ease-out, 140ms out, the exit quicker than the
   entrance. Hidden by visibility after the fade, never display, so the
   close can play. */
.kisaka-select__list
   {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 100%;
      width: max-content;
      max-width: min(560px, calc(100vw - 24px));
      max-height: 296px;
      margin: 6px 0 0;
      padding: 6px 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      list-style: none;
      border: 1px solid #e3e7ef;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 44px rgba(26, 27, 38, 0.16);
      outline: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-4px) scale(0.97);
      transform-origin: top center;
      transition: opacity 140ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 140ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), visibility 0s linear 140ms;
   }

.kisaka-select.is-open .kisaka-select__list
   {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: opacity 200ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 200ms var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), visibility 0s;
   }

/* No room below: it opens upwards, growing from its bottom edge instead. */
.kisaka-select.is-above .kisaka-select__list
   {
      top: auto;
      bottom: 100%;
      margin: 0 0 6px;
      transform: translateY(4px) scale(0.97);
      transform-origin: bottom center;
   }

.kisaka-select.is-above.is-open .kisaka-select__list
   {
      transform: none;
   }

/* A wide list near the right edge lines up with the field's right side. */
.kisaka-select.is-right .kisaka-select__list
   {
      left: auto;
      right: 0;
   }

.kisaka-select__option
   {
      min-height: 40px;
      padding: 9px 16px;
      font-size: 0.9375rem;
      line-height: 1.45;
      color: var(--job-body, #4f5665);
      cursor: pointer;
      white-space: normal;
   }

/* No transition: the highlight follows the pointer and the arrow keys at
   once, many times a minute. */
.kisaka-select__option.is-active
   {
      background: #f6f7fb;
      color: var(--job-ink, #2C2D3F);
   }

.kisaka-select__option[aria-selected="true"]
   {
      font-weight: 500;
      color: var(--job-accent, #cb1f34);
   }

.kisaka-select__option[aria-disabled="true"]
   {
      color: #b8bdc8;
      cursor: default;
   }

.kisaka-select__group-list
   {
      margin: 0;
      padding: 0;
      list-style: none;
   }

/* Region headings in the qualification list: the posting's small red caps. */
.kisaka-select__group-label
   {
      display: block;
      padding: 12px 16px 4px;
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: var(--job-track-caps, 0.18em);
      text-transform: uppercase;
      color: var(--job-accent, #cb1f34);
   }

.kisaka-select__group + .kisaka-select__group
   {
      margin-top: 4px;
      border-top: 1px solid #eef0f5;
   }

/* Fields in a row that aren't required have no error strip above them, so
   a dropdown in that spot takes the strip's 13px to line up. */
.kisaka-apply .kisaka-job-form__row .kisaka-job-form__group > .kisaka-select
   {
      margin-top: 13px;
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-select__list,
      .kisaka-select.is-above .kisaka-select__list
         {
            transform: none;
         }

      .kisaka-select__chevron
         {
            transition: none;
         }
   }

@media (forced-colors: active)
   {
      .kisaka-select__trigger,
      .kisaka-select__list
         {
            border: 1px solid ButtonText;
         }

      .kisaka-select__option.is-active
         {
            outline: 1px solid Highlight;
         }
   }