.form-dropdown {
  font-size: var(--font-size-base);
  line-height: var(--font-lh-base);
  letter-spacing: 0.02em;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--color-base-lightest);
  border: 1px solid var(--color-base-lightest);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../images/chevron-down.png");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.form-dropdown:hover {
  border-color: var(--color-primary-light);
}

.form-dropdown:focus-visible {
  border-color: var(--color-primary);
  background-color: #fff;
  outline: none;
}

html[dir="rtl"] .form-dropdown {
  background-position: left 16px center;
}

.form-dropdown option {
  padding: 8px;
}

.form-dropdown option:hover {
  background-color: var(--color-primary-light);
}

.form-dropdown option:checked {
  background-image: url("/images/success-check-icon.png");
  background-repeat: no-repeat;
  background-position: right 16px center;
}