.card-picker-dropdown {
  --default-field-height: 2.5rem;
  --default-field-width: 24rem;
  --options-menu-height: 33.2rem;

  position: relative;
  z-index: 10;
  max-width: 100%;
  color: var(--boxel-dark);
  font: var(--boxel-font);
  letter-spacing: var(--boxel-lsp-sm);
}

.card-picker-dropdown .ember-basic-dropdown-content-wormhole-origin {
  position: absolute;
}

.card-picker-dropdown--selected .ember-basic-dropdown-content-wormhole-origin {
  left: -100%;
}

.card-picker-dropdown > .ember-power-select-trigger {
  min-height: var(--default-field-height);
  width: var(--default-field-width);
  padding: var(--boxel-sp-xs) var(--boxel-sp);
  background: url('/images/icons/caret-dropdown.svg') right 1.125rem center/auto 0.5rem no-repeat;
  background-color: var(--boxel-light);
  border: 1px solid var(--boxel-purple-300);
  border-radius: var(--boxel-border-radius);
  transition: border-color var(--boxel-transition);
}

.card-picker-dropdown--selected > .ember-power-select-trigger {
  width: auto;
  background-size: 0.6rem auto;
  border: none;
}

.card-picker-dropdown > .ember-power-select-trigger:hover {
  border-color: var(--boxel-dark);
  cursor: pointer;
}

.card-picker-dropdown .ember-basic-dropdown-content {
  max-width: 100%;
  height: 100%;
  width: var(--default-field-width);
  max-height: var(--options-menu-height);
  background-color: var(--boxel-light);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--boxel-border-radius);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
}

.card-picker-dropdown .ember-basic-dropdown-content.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below var(--boxel-transition);
}

.card-picker-dropdown .ember-basic-dropdown-content.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below var(--boxel-transition) reverse;
}

.card-picker-dropdown__option {
  padding: var(--boxel-sp) var(--boxel-sp-xxxl);
  background-image: url('/@cardstack/boxel/images/icons/icon-circle-light.svg');
  background-repeat: no-repeat;
  background-position: left var(--boxel-sp) top var(--boxel-sp-xxl);
  background-size: var(--boxel-icon-sm) var(--boxel-icon-sm);
}

.card-picker-dropdown__option--selected {
  background-image: url('/images/icons/success-bordered.svg');
}

.ember-power-select-selected-item .card-picker-dropdown__option--selected {
  background-image: unset;
}

.card-picker-dropdown__option + .card-picker-dropdown__option {
  border-top: 1px solid var(--boxel-light-400);
}

.card-picker-dropdown__option:hover:not(.card-picker-dropdown__option--disabled) {
  background-color: var(--boxel-purple-100);
  cursor: pointer;
}

.ember-power-select-selected-item .card-picker-dropdown__option:hover {
  background-color: initial;
}

.card-picker-dropdown__option--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}