@mixin border-all($bw){
  margin-left: -#{$bw};
  border-width: $bw;
  border-color: transparent;
  border-style: solid;
}

@include b(tips) {
  //position: absolute;
  display: inline-block;
  @include when(error-pop) {
    display: block;
  }
  @include e(content) {
    padding: 10px 12px;
    display: inline-block;
    background-color: $white-color;
    border-style: solid;
    border-width: 2px;
    border-color: $grey-color;

    z-index: 1000;
  }

  @include e(arrow) {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-color: transparent;
    border-style: solid;
    border-top-color: $grey-color;

    &:after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      @include border-all(7px);
      bottom: -3px;
      border-top-color: $white-color;
    }
  }

  @include e(pop-container){
    position: relative;
  }

  @include e(pop){
    display: block;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 8px;
    &[x-placement^="bottom"] .mc-tips__arrow {
      top: -15px;
      border-top-color: transparent;
      border-bottom-color: $grey-color;
      &:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        @include border-all(7px);
        bottom: -9px;
        border-top-color: transparent;
        border-bottom-color: $white-color;
      }
    }
  }
}