// Telephone input
// --------------------------------------------------
@telephone-country-width: 6 / 27;
@telephone-area-width: 7 / 27;
@telephone-number-width: 14 / 27;
@telephone-margin: 4px;
@telephone-margin-offset: 3px;

.formatted-telephone {
  .formatted-telephone-country {
    width: floor(@form-control-width * @telephone-country-width) - @telephone-margin - @telephone-margin-offset;
  }

  .formatted-telephone-area {
    width: floor(@form-control-width * @telephone-area-width) - @telephone-margin - @telephone-margin-offset;
  }

  .formatted-telephone-number {
    width: floor(@form-control-width * @telephone-number-width);
  }

  .formatted-telephone-country,
  .formatted-telephone-area {
    margin-right: @telephone-margin;
  }

  .readonly {
    .formatted-telephone-country,
    .formatted-telephone-area,
    .formatted-telephone-number {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .form-control {
    display: inline-block;
  }
}

.form-inline .formatted-telephone {
  .formatted-telephone-country {
    width: floor(@form-control-inline-width * @telephone-country-width) - @telephone-margin - @telephone-margin-offset;
  }

  .formatted-telephone-area {
    width: floor(@form-control-inline-width * @telephone-area-width) - @telephone-margin - @telephone-margin-offset;
  }

  .formatted-telephone-number {
    width: floor(@form-control-inline-width * @telephone-number-width);
  }

  .formatted-telephone-country,
  .formatted-telephone-area,
  .formatted-telephone-number {
    padding-left: 3px;
    padding-right: 3px;
  }
}