/*
 * App-specific styles. Layout, spacing, typography, and tints come from Web
 * Awesome native styles, `wa-*` utility classes, design tokens, and inline
 * styles in the components themselves. Only what those can't express lives
 * here.
 */

/* Body font comes from awesome_web/styles/native.css. */

/* The dial-code prefix beside the phone number: a flag and a code, no more.
 * Web Awesome's select padding is made for a label-wide field; trimmed so the
 * prefix stays narrow on a phone. */
.phone-country::part(combobox) {
  padding-inline-start: var(--wa-space-xs);
  padding-inline-end: var(--wa-space-2xs);
  gap: var(--wa-space-2xs);
}
.phone-country::part(display-input) {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.phone-country::part(expand-icon) {
  margin-inline-start: var(--wa-space-2xs);
}