.dropdown {
  color: var(--dropdown-group-headline-color);
  font-family: var(--dropdown-group-headline-text-font-family);
  line-height: var(--dropdown-group-headline-text-line-height);
  font-size: var(--dropdown-group-headline-text-font-size);
  letter-spacing: var(--dropdown-group-headline-text-letter-spacing);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  margin-top: var(--core-dimension-600);
}

.dropdown.no-margin {
  margin: 0;
}

.dropdown.no-margin-top {
  margin-top: 0;
}

.dropdown.has-error .dropdown__input-field {
  border-color: var(--input-field-border-color-critical);
}

.dropdown__select {
  display: none;
}

.dropdown__label {
  display: block;
  font-weight: var(--dropdown-group-headline-text-font-weight);
  margin-bottom: var(--label-gap);
}

.dropdown__input-field {
  padding: var(--input-field-inset-all);
  border: var(--input-field-border-width) solid var(--input-field-border-color-resting);
  border-radius: var(--dropdown-border-radius);
  cursor: pointer;
  color: var(--dropdown-group-headline-color);
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: none;
  display: flex;
  justify-content: space-between;
  background-color: var(--dropdown-surface-color);
}

.dropdown__input-field:focus-visible {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .dropdown__input-field:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.dropdown__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - var(--icon-functional-m-size) - var(--input-field-gap));
  pointer-events: none;
}

.dropdown__options-container {
  width: 100%;
  margin-top: var(--core-dimension-50);
  padding: var(--dropdown-flyout-inset-all);
  position: absolute;
  background-color: var(--dropdown-surface-color);
  border-radius: var(--dropdown-border-radius);
  box-shadow: var(--dropdown-elevation-1-x) var(--dropdown-elevation-1-y) var(--dropdown-elevation-1-blur) var(--dropdown-elevation-1-spread) var(--dropdown-elevation-1-color), var(--dropdown-elevation-2-x) var(--dropdown-elevation-2-y) var(--dropdown-elevation-2-blur) var(--dropdown-elevation-2-spread) var(--dropdown-elevation-2-color);
  z-index: var(--z-index-popup);
}

.dropdown__option {
  margin-left: 0;
  padding: var(--dropdown-item-inset-all);
  border-bottom: 1px solid var(--dropdown-item-border-color);
  display: inline-block;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
}

.dropdown__option .dropdown__option-text {
  width: calc(100% - var(--radio-button-size) - var(--dropdown-item-gap));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
}

.dropdown__option::after {
  border-radius: var(--radio-button-border-radius);
  border: var(--radio-button-border-width) solid var(--radio-button-unselected-border-color-resting);
  background-color: var(--radio-button-unselected-surface-resting);
  content: "";
  width: var(--radio-button-size);
  height: var(--radio-button-size);
  vertical-align: bottom;
  pointer-events: none;
}

.dropdown__option:hover {
  background-color: var(--dropdown-item-surface-hover);
}

.dropdown__option:hover::after {
  border: var(--radio-button-border-width) solid var(--radio-button-unselected-border-color-hover);
  background-color: var(--radio-button-unselected-surface-hover);
}

.dropdown__option:active {
  background-color: var(--dropdown-item-surface-active);
}

.dropdown__option:active::after {
  border: var(--radio-button-border-width) solid var(--radio-button-unselected-border-color-active);
  background-color: var(--radio-button-unselected-surface-active);
}

.dropdown__option:focus-visible {
  outline-offset: -4px;
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .dropdown__option:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.dropdown__option.selected::after {
  border: var(--radio-button-selected-border-width) solid var(--radio-button-selected-border-color-resting);
}

.dropdown__option.selected::after:hover {
  border: var(--radio-button-selected-border-width) solid var(--radio-button-selected-border-color-hover);
}

.dropdown__option.selected::after:active {
  border: var(--radio-button-selected-border-width) solid var(--radio-button-selected-border-color-active);
}

.dropdown__chevron {
  pointer-events: none;
}

.dropdown__chevron .dropdown__chevron--left,
.dropdown__chevron .dropdown__chevron--right {
  vertical-align: middle;
  background-color: var(--accordion-chevron-color-resting);
  display: inline-block;
  height: calc(var(--semantic-border-width-static) * 2);
  width: calc(var(--dropdown-group-headline-text-line-height) / 2);
  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown__chevron .dropdown__chevron--left {
  transform: rotate(40deg);
}

.dropdown__chevron .dropdown__chevron--right {
  transform: rotate(-40deg);
  margin-left: calc(var(--size-3xs) * -1);
}

.dropdown__chevron.icon--is-rotated .dropdown__chevron--left {
  transform: rotate(-40deg);
}

.dropdown__chevron.icon--is-rotated .dropdown__chevron--right {
  transform: rotate(40deg);
}

.dropdown__error-message {
  color: var(--semantic-color-signal-attention-critical);
  margin-top: var(--semantic-spacing-static-100);
}

.dropdown__error-message::before {
  content: "\e918";
  font-family: "Allianz Icons";
  color: var(--indicator-surface-critical);
  font-size: var(--semantic-text-body-m-font-size);
  margin-right: var(--semantic-spacing-static-100);
  vertical-align: text-bottom;
}

.dropdown__filter-wrapper {
  padding: var(--dropdown-item-inset-all);
}

.dropdown__filter-wrapper .dropdown__clear-filter-button {
  position: absolute;
  height: var(--semantic-spacing-static-600);
  width: var(--semantic-spacing-static-600);
  padding: 0;
  background: transparent;
  border: 0;
  top: var(--core-dimension-900);
  right: var(--core-dimension-900);
  cursor: pointer;
  color: var(--input-field-color-resting);
}

.dropdown__filter-wrapper .dropdown__clear-filter-button:focus-visible {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .dropdown__filter-wrapper .dropdown__clear-filter-button:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.dropdown__filter {
  width: 100%;
  padding: var(--input-field-inset-top) 44px var(--input-field-inset-bottom) var(--input-field-inset-left);
  border: var(--semantic-border-width-action) solid var(--input-field-border-color-resting);
  border-radius: var(--dropdown-border-radius);
  color: var(--input-field-color-resting);
}

.dropdown__filter:focus-visible {
  outline: none;
}

.dropdown__filter:focus {
  border-color: var(--semantic-color-border-secondary-active);
  outline: var(--border-m) solid transparent;
}

.dropdown__filter::placeholder {
  color: var(--input-field-placeholder-color-resting);
}

.dropdown__options-wrapper {
  overflow-y: auto;
  max-height: calc(var(--semantic-spacing-static-1200) * 8);
  scrollbar-width: thin;
}