v-phone-input/dist/v-phone-input.css

International phone field for Vuetify 3 and Vue 3.

.v-phone-input__country__icon {
  margin-inline: 4px;
}
.v-phone-input__country__icon.f32 {
  height: var(--v-phone-input-country-icon-height, 24px);
}
.v-phone-input__country__icon.f32 .flag {
  transform: scale(0.75);
  transform-origin: 0 top;
}
.v-phone-input__country__icon.fi {
  min-width: 24px;
  max-width: 24px;
  width: 24px;
  line-height: var(--v-phone-input-country-icon-height, 24px);
}

.v-phone-input__country__menu .v-list-item .v-phone-input__country__icon {
  margin-inline-end: 24px;
}
.v-phone-input__country__menu .v-list-item .v-phone-input__country__append {
  margin-inline-start: 24px;
}

.v-phone-input .v-phone-input__country__input.v-input {
  flex-grow: 0;
  flex-shrink: 0;
}
.v-phone-input .v-phone-input__country__input.v-input.v-input--density-compact .v-field--variant-plain .v-field__append-inner .v-icon, .v-phone-input .v-phone-input__country__input.v-input.v-input--density-compact .v-field--variant-underlined .v-field__append-inner .v-icon {
  font-size: 20px;
}
.v-phone-input .v-phone-input__country__input.v-input .v-field {
  min-width: var(--v-phone-input-country-width, 5rem);
  max-width: var(--v-phone-input-country-width, 5rem);
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}
.v-phone-input .v-phone-input__country__input.v-input .v-field.v-field--variant-outlined {
  --v-input-chips-margin-top: 3px;
  --v-input-chips-margin-bottom: 3px;
  margin-inline-end: -1px;
}
.v-phone-input .v-phone-input__country__input.v-input .v-field.v-field--variant-outlined .v-field__outline .v-field__outline__end {
  border-radius: 0;
}
.v-phone-input .v-phone-input__country__input.v-input .v-field .v-field__input input {
  height: 1px;
}
.v-phone-input .v-phone-input__country__input.v-input .v-field .v-field__input input {
  height: 1px;
}
.v-phone-input .v-phone-input__country__input.v-input.v-input--density-compact .v-field--variant-plain .v-field__append-inner .v-icon, .v-phone-input .v-phone-input__country__input.v-input.v-input--density-compact .v-field--variant-underlined .v-field__append-inner .v-icon {
  font-size: 20px;
}
.v-phone-input .v-phone-input__country__input.v-input.v-autocomplete .v-field__input {
  flex-wrap: nowrap;
}
.v-phone-input .v-phone-input__country__input.v-input.v-autocomplete .v-field__input input {
  min-width: 0;
  height: auto;
}
.v-phone-input .v-phone-input__country__input.v-input.v-autocomplete.v-phone-input__country__input--focused {
  min-width: var(--v-phone-input-country-autocomplete-width, 70%);
  max-width: var(--v-phone-input-country-autocomplete-width, 70%);
}
.v-phone-input .v-phone-input__country__input.v-input.v-autocomplete.v-phone-input__country__input--focused .v-field {
  --v-phone-input-country-width: 100%;
}
.v-phone-input .v-phone-input__country__input.v-input.v-autocomplete.v-phone-input__country__input--focused .v-field__input input {
  min-width: 65px;
}

.v-phone-input__phone__input.v-input {
  flex-grow: 1;
  flex-shrink: 1;
}
.v-phone-input__phone__input.v-input .v-field {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}
.v-phone-input__phone__input.v-input .v-field.v-field--variant-outlined .v-field__outline > .v-field__outline__start {
  border-radius: 0;
}

.v-phone-input {
  --v-phone-input-country-icon-height: 24px;
  --v-phone-input-country-width: 5rem;
  --v-phone-input-country-autocomplete-width: 70%;
  display: flex;
  align-items: flex-start;
}
.v-phone-input .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-outlined, .v-phone-input .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-filled, .v-phone-input .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-solo {
  --v-phone-input-country-width: 6rem;
}
.v-phone-input.v-phone-input--prepend-inner-icon .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field {
  --v-phone-input-country-width: 6.5rem;
}
.v-phone-input.v-phone-input--prepend-inner-icon .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-outlined, .v-phone-input.v-phone-input--prepend-inner-icon .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-filled, .v-phone-input.v-phone-input--prepend-inner-icon .v-phone-input__country__input.v-input:not(.v-autocomplete.v-phone-input__country__input--focused) .v-field.v-field--variant-solo {
  --v-phone-input-country-width: 7.5rem;
}