@import (reference) "./../styles/less/mixins/_logical-properties.less";

@four-digit-country-code-width: 120px;

.tw-telephone {
  display: flex;

  .tw-telephone__number-input {
    .margin(left, var(--size-12));
  }
}

.tw-telephone__country-select {
  flex-basis: @four-digit-country-code-width;
  flex-shrink: 0;

  .np-input-group {
    width: 100%;
  }
}

.tw-telephone__country-select--with-input-group-addon-start {
  .np-button-input {
    padding-inline-start: var(--size-48);
    padding-inline-end: 26px !important;
  }
}

.tw-telephone__number-input {
  flex: auto 1 1;
}