@import '../global/tools';

.phone-component {
  @include flexbox;
  align-items: center;
  flex-wrap: wrap;

  strong {
    font-weight: bold;
    margin: 0 10px;
  }

  .extension-part input[id*="_phone_extension"] {
    max-width: 125px;
    margin-bottom: 0;
  }

  .input-wrapper {
    border: 1px solid $grey-n07;
  }

  .read-only-prefix {
    color: $grey-n07;
    margin-left: 0.5em;
  }

  .error {
    > span {
      text-align: left;
      color: orange;
      font-weight: bold;
      display: block;
    }
    > input {
      border: 1px solid orange;
      background: lighten(orange, 40%);
    }
  }
}