.phone {
  --react-international-phone-border-color: var(--UI-Grey-60);
  --react-international-phone-border-radius: var(--Corner-radius-Small);
  --react-international-phone-font-size: var(
    --typography-Body-Regular-fontSize
  );
  --react-international-phone-height: 40px;
  --react-international-phone-text-color: var(--UI-Grey-60);
}

.phone :global(.react-international-phone-input-container) {
  display: grid;
  /* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
  grid-template-columns: 470px minmax(203px, 1fr);
  width: min(280px, 100%);
}

/* react-international-phone only exposes variables to change border-color */
.phone :global(.react-international-phone-country-selector-button),
.phone :global(.react-international-phone-input) {
  border-width: 2px;
}

.phone :global(.react-international-phone-input) {
  padding: var(--Spacing-x1) var(--Spacing-x2);
}