.select {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.select__control {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 12px 36px 12px 14px;
  background: var(--bg-1);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-std), background var(--d-fast) var(--ease-std);
}

.select__control:hover { border-color: var(--line-strong); }
.select__control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

.select::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform var(--d-fast) var(--ease-std);
}

.select--sm .select__control { padding: 7px 30px 7px 10px; font-size: var(--t-xs); }
.select--sm::after { right: 10px; width: 6px; height: 6px; }