/* Select
   Native select styled to match the input field, with a custom chevron.
   Sizes are set with data-size. Wrap label, control and hint in .dp-field.
   All colour, radius and type come from tokens.css. */

.dp-select {
  width: 100%;
  height: 2.5rem;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background-color: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: 0 calc(var(--dp-space-3) * 2 + 1rem) 0 var(--dp-space-3);
  appearance: none;
  cursor: pointer;
  /* Chevron drawn as an inline SVG, tinted to the muted text colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dp-space-3) center;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-select:hover {
  border-color: var(--dp-blue-400);
}

.dp-select:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-select:disabled {
  background-color: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-select[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-select[data-size="sm"] {
  height: 2.125rem;
  font-size: var(--dp-text-sm);
}

.dp-select[data-size="lg"] {
  height: 3rem;
  font-size: var(--dp-text-lg);
}