.igloo-input-phone {
  display: flex;
  align-items: center;
  position: relative;

  .ant-input {
    border-radius: 0px @border-radius @border-radius 0px;
    flex: 1 auto;
    border: 1px solid @border-color;
    height: @height-base;
  }

  // 不能选择areaCode
  .igloo-phone-number-addon-before {
    width: 63px;
    height: @height-base;
    text-align: center;
    background-color: @disabled-background-color;
    color: @hint-color;
    border-radius: @border-radius 0px 0px @border-radius;
    font-size: @font-size-base;
    line-height: 24px;
    border: 1px solid @border-color;
    border-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 可以选择areaCode
  .igloo-phone-number-select {
    width: 86px;

    .ant-select-selector {
      width: 86px;
      border: 1px solid @border-color;
      border-right: 0px;
      height: @height-base;
      border-radius: @border-radius 0px 0px @border-radius;
    }
  }

  &:hover {
    .ant-input {
      border-color: @hover-color;
    }
  }

  &:active {
    .ant-input {
      border-color: @active-color;
    }
  }
}

.igloo-input-phone-disabled {
  .igloo-phone-number-select {
    .ant-select-selector {
      border-color: @disabled-border-color !important;
    }
  }

  .igloo-input,
  .igloo-phone-number-addon-before {
    border-color: @disabled-border-color;
  }

  &:hover {
    .ant-input {
      border-color: @disabled-border-color;
    }
  }

  &:active {
    .ant-input {
      border-color: @disabled-border-color;
    }
  }
}