@import "../../scss/utilities/index";

ecabs-phone {
  @extend .ecabs-phone;

  .ecabs-tel-input-container {
    .mat-mdc-input-element {
      @extend .ecabs-tel-input-input;
    }

    .country-selector {
      @extend .country-selector;

      .country-selector-code {
        padding-right: .2rem;
      }
    }
  }

  .form-field.form-field--invalid {
    .ecabs-tel-input-container {
      &,
      .country-selector {
        @extend .form-field__input--invalid;
      }
    }
  }

  .disabled {
    .ecabs-tel-input-container {
      background-color: var(--color-white-opacity-05);
      border-color: var(--color-gray-300);
    }

    .country-selector:disabled {
      color: inherit;
    }

    button {
      background-color: unset !important;
    }
  }
}

.ecabs-tel-input-mat-menu-panel {
  .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
    @include fontSize(14px);

    font-weight: $font-weight-regular;
  }

  &.mat-mdc-menu-panel {
    max-width: calc-rem(312px);
  }
}