/*
 * FM-16 Phone input — app/components/ui/phone_input_component.rb
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.fm-phone-input {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}

/*
 * Country-code leading affix — a real Ui::SelectComponent styled compact
 * so it sits beside the number field instead of taking a full-width row.
 */
.fm-phone__code {
  width: 84px;
  flex-shrink: 0;
}

.fm-phone__code .ui-listbox__trigger {
  padding-inline: var(--space-3);
}

.fm-phone-input__number {
  flex: 1;
}