.phone {
  --react-international-phone-border-color: var(--some-black-color, #757575);
  --react-international-phone-border-radius: 0.4rem;
  --react-international-phone-font-size: 1.6rem;
  --react-international-phone-height: 4rem;
  --react-international-phone-text-color: color:
    var(--some-black-color, #757575);
}

.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: 4.7rem minmax(20.3rem, 1fr);
  width: min(28rem, 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: 0.2rem;
}

.phone :global(.react-international-phone-input) {
  padding: 0.8rem 1.6rem;
}