.vehicle-catalog-control,
.vehicle-catalog-anchor {
  display: block;
  width: 100%;
  min-width: 0;
}

.vehicle-catalog-anchor {
  position: relative;
}

.vehicle-catalog-anchor > input {
  width: 100%;
}

.vehicle-catalog-list {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  box-sizing: border-box;
  max-height: var(--vehicle-catalog-list-max-height, min(320px, 48dvh));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 12px;
  background: #151a22;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.vehicle-catalog-anchor[data-vehicle-catalog-placement="top"] .vehicle-catalog-list {
  top: auto;
  bottom: calc(100% + 6px);
}

.vehicle-catalog-summary {
  display: block;
  margin-top: 5px;
  color: #c3ccd9;
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
}

.vehicle-catalog-summary:empty {
  display: none;
}

.vehicle-catalog-list[hidden] {
  display: none !important;
}

.vehicle-catalog-option {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #f3f6fb;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.vehicle-catalog-option strong {
  font-size: .92rem;
  font-weight: 750;
}

.vehicle-catalog-option small {
  color: #a9b3c3;
  font-size: .76rem;
}

.vehicle-catalog-option .vehicle-catalog-generations {
  color: #90a7c5;
}

.vehicle-catalog-option:hover,
.vehicle-catalog-option:focus-visible,
.vehicle-catalog-option.is-active,
.vehicle-catalog-option[aria-selected="true"] {
  outline: none;
  background: rgba(62, 126, 232, .2);
}

.vehicle-catalog-option--manual {
  margin-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, .2);
  border-radius: 0 0 9px 9px;
}

.vehicle-catalog-hint {
  display: block;
  margin-top: 5px;
  color: #9da8b9;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.35;
}

.vehicle-catalog-hint.is-error {
  color: #f3b4b4;
}

@media (max-width: 640px) {
  .field-vehicle-class {
    grid-column: 1 / -1;
  }
}

html[data-theme="light"] .vehicle-catalog-list,
body[data-theme="light"] .vehicle-catalog-list {
  border-color: rgba(51, 65, 85, .2);
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

html[data-theme="light"] .vehicle-catalog-summary,
body[data-theme="light"] .vehicle-catalog-summary {
  border-color: rgba(51, 65, 85, .16);
  background: #fff;
  color: #475569;
}

html[data-theme="light"] .vehicle-catalog-option,
body[data-theme="light"] .vehicle-catalog-option {
  color: #172033;
}

html[data-theme="light"] .vehicle-catalog-option small,
body[data-theme="light"] .vehicle-catalog-option small,
html[data-theme="light"] .vehicle-catalog-hint,
body[data-theme="light"] .vehicle-catalog-hint {
  color: #5c687b;
}

html[data-theme="light"] .vehicle-catalog-option .vehicle-catalog-generations,
body[data-theme="light"] .vehicle-catalog-option .vehicle-catalog-generations {
  color: #4b6482;
}

@media (forced-colors: active) {
  .vehicle-catalog-list,
  .vehicle-catalog-option--manual {
    border: 1px solid CanvasText;
  }
}