.map-phone-input {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  width: 100%;
}

.map-phone-input-area,
.map-phone-input-number {
  min-height: 2.8571rem;
}

.map-phone-input-area {
  border: 1.5px solid var(--map-border);
  border-right: 0;
  border-radius: var(--map-radius-md) 0 0 var(--map-radius-md);
  background-color: var(--map-surface-2);
  color: var(--map-text-1);
  font-size: var(--map-font-size-md);
  font-weight: 700;
}

.map-phone-input-number.map-control {
  border-radius: 0 var(--map-radius-md) var(--map-radius-md) 0;
}

.map-phone-input:focus-within .map-phone-input-area {
  border-color: var(--map-primary-bg);
  background-color: var(--map-surface);
}

.map-page-form-field.is-invalid .map-phone-input-area,
.map-page-form-field.is-invalid .map-phone-input-number {
  border-color: var(--map-red);
}

@media (max-width: 575.98px) {
  .map-phone-input {
    grid-template-columns: 1fr;
  }

  .map-phone-input-area,
  .map-phone-input-number.map-control {
    border-radius: var(--map-radius-md);
  }

  .map-phone-input-area {
    border-right: 1.5px solid var(--map-border);
  }
}