phone-number.component.scss

.profile-info {
  ion-label {
    margin-right: 1em;
    min-width: 7em;
    line-height: 45px;
  }

  ion-input, ion-select {
    min-height: 45px;
    max-width: 50%;
    min-width: 200px;
    border: 1px solid #3a3a4a;
  }

  @media (max-width: 424px) {
    ion-label, ion-input, ion-select {
      font-size: 12px;
      --font-size: 12px;
    }

    ion-select::part(icon) {
      transform: unset;
    }
  }

  ion-select::part(container) {
    width: 100%;
  }

  ion-select::part(icon) {
    margin-right: 10px;
    transform: scale(1.5);
  }

  @media (max-width: 374px) {
    ion-input, ion-select {
      min-width: 150px;
    }
  }

  ion-input ion-select {
    max-width: unset;
    min-width: unset;
    border: unset;
    border-right: 1px solid #3a3a4a;
    pointer-events: all;
  }

  ion-input ion-select::part(text), ion-input ion-select::part(placeholder) {
    width: 24px;
    text-overflow: clip;
  }

  ion-input {
    --padding-start: 10px !important;
  }

  ion-input:has(ion-select) {
    --padding-start: 0px !important;
  }

  ion-input ion-select::part(container) {
    width: auto;
  }

  ion-select {
    --padding-bottom: 10px !important;
    --padding-top: 10px !important;
    --padding-start: 10px !important;
  }
  
  .country-codes ::ng-deep ion-item {
    font-size: 10px;
  }

  ion-row {
    display: flex;
    margin-bottom: 10px;
  }
}

::ng-deep .country-codes {
  --width: 95%;
  --max-width: 320px;
  --max-height: 50%;

  ion-radio {
    font-size: smaller;
  }

  ::part(container) {
    display: none;
  }
  
  ::ng-deep ion-select-popover ion-list, ::ng-deep ion-select-popover ion-list ion-item {
    --background: #f2f2f2 !important;
    background: #f2f2f2 !important;
  }
}