.status-picker {
  position: relative;
  display: block;
  margin-top: 4px;
}

.status-picker-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 5px 30px 5px 4px;
  border: 0;
  border-bottom: 1px solid #8b99a6;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.status-picker-trigger:hover,
.status-picker-trigger[aria-expanded="true"] {
  border-bottom: 2px solid #286cc0;
  background: color-mix(in srgb, #d8eefe 24%, transparent);
}

.status-picker-chevron {
  position: absolute;
  right: 8px;
  width: 12px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-picker-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  max-height: min(390px, 55vh);
  overflow-y: auto;
  padding: 3px 0;
  border: 1px solid #cbd2d9;
  border-top: 2px solid #2473ca;
  border-radius: 0 0 6px 6px;
  background: #fff;
  box-shadow: 0 6px 16px #0003;
}

.status-picker-menu[hidden] { display: none; }

.status-picker-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: #3d4248;
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.status-picker-option:hover,
.status-picker-option:focus-visible { background: #dceefa; outline: none; }
.status-picker-option.selected { background: #edf3fb; }
.status-picker-option.selected:hover { background: #dceefa; }

.alloy-status-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
}

.status-auto-added { color: #36a1df; }
.status-available { color: #34a987; }
.status-broken { color: #d75a65; }
.status-in-stock { color: #ed9950; }
.status-received { color: #34a987; }
.status-deployed { color: #38a9e5; }
.status-in-repair { color: #f09a49; }
.status-missing { color: #25aab1; }
.status-retired { color: #85919d; }
.status-retired-missing { color: #bc6675; }
.status-lost\/stolen { color: #dc7d45; }

:root[data-kc-theme="dark"] .status-picker-menu {
  border-color: #424950;
  background: #25282b;
  box-shadow: 0 8px 22px #0008;
}

:root[data-kc-theme="dark"] .status-picker-option { color: #e5e8eb; }
:root[data-kc-theme="dark"] .status-picker-option:hover,
:root[data-kc-theme="dark"] .status-picker-option:focus-visible { background: #324b62; }
:root[data-kc-theme="dark"] .status-picker-option.selected { background: #283c4e; }
:root[data-kc-theme="dark"] .status-picker-option.selected:hover { background: #324b62; }
:root[data-kc-theme="dark"] .status-picker-trigger:hover,
:root[data-kc-theme="dark"] .status-picker-trigger[aria-expanded="true"] { background: #252b31; }