/**
 * <Select> — vanilla component kit primitive.
 *
 * Visual match to <Input>; SVG chevron embedded as a background image so we
 * don't need an external asset or a wrapper element.
 *
 * Markup:
 *   <select class="c-select" name="environment">
 *     <option value="production">Production</option>
 *     <option value="test">Test</option>
 *   </select>
 */

.c-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 0 calc(var(--space-7) + 8px) 0 var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235f5e5a' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 12px 12px;
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.c-select:hover:not(:disabled) {
  border-color: var(--border-secondary);
}

.c-select:focus-visible {
  outline: none;
  border-color: var(--info-border);
  box-shadow: var(--focus-ring);
}

.c-select:disabled {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: not-allowed;
}