.el-tooltip{
  display: inline-block;

}

.el-tooltip-rel{
  display: inline-block;
  position: relative;
}

.el-tooltip-popper{
  position: absolute;
  border-radius: $border-radius-base;
  padding: $tooltip-padding;
  z-index: $index-popper;
  font-size: $tooltip-font-size;
  line-height: 1.2;

  .popper-arrow,
  .popper-arrow::after{
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  .popper-arrow{
    border-width: $tooltip-arrow-size;
  }

  .popper-arrow::after{
    content:" ";
    border-width: 5px;
  }

  &[x-placement^="top"]{
    margin-bottom: calc(#{$tooltip-arrow-size} + 6px);
  }

  &[x-placement^="top"] .popper-arrow{
    bottom:-$tooltip-arrow-size;
    left: 50%;
    margin-right: calc(#{$tooltip-arrow-size} / 2);
    border-top-color: $tooltip-border-color;
    border-bottom-width: 0;

    &::after{
      bottom:1px;
      margin-left:-5px;
      border-top-color:$tooltip-fill;
      border-bottom-width: 0;
    }
  }

  &[x-placement^="bottom"]{
    margin-top: calc(#{$tooltip-arrow-size} + 6px);
  }

  &[x-placement^="bottom"] .popper-arrow{
    top:-$tooltip-arrow-size;
    left: 50%;
    margin-right: calc(#{$tooltip-arrow-size} / 2);
    border-top-width: 0;
    border-bottom-color:$tooltip-border-color;

    &::after{
      top:1px;
      margin-left: -5px;
      border-top-width: 0;
      border-bottom-color:$tooltip-fill;
    }
  }

  &[x-placement^="right"]{
    margin-left: calc(#{$tooltip-arrow-size} + 6px);
  }

  &[x-placement^="right"] .popper-arrow{
    top:50%;
    left:-$tooltip-arrow-size;
    margin-bottom:calc(#{$tooltip-arrow-size}/2);
    border-right-color:$tooltip-border-color;
    border-left-width:0;

    &::after{
      bottom:-5px;
      left:1px;
      border-right-color:$tooltip-fill;
      border-left-width: 0;
    }
  }

  &[x-placement^="left"]{
    margin-right: calc(#{$tooltip-arrow-size} + 6px);
  }

  &[x-placement^="left"] .popper-arrow{
    top:50%;
    right:-$tooltip-arrow-size;
    margin-bottom: calc(#{$tooltip-arrow-size}/2);
    border-right-width: 0;
    border-left-color:$tooltip-border-color;


    &::after{
      right:1px;
      bottom:-5px;
      margin-left: -5px;
      border-right-width:0;
      border-left-color:$tooltip-fill;
    }
  }

  &.is-dark{
    background: $tooltip-fill;
    color:$tooltip-color;
  }

  &.is-light{
    background: $tooltip-color;
    border:1px solid $tooltip-fill;

    &[x-placement^="top"] .popper-arrow{
      border-top-color:$tooltip-fill;
      &::after{
        border-top-color:$tooltip-color;
      }
    }

    &[x-placement^="bottom"] .popper-arrow{
      border-bottom-color:$tooltip-fill;
      &::after{
        border-bottom-color:$tooltip-color;
      }
    }

    &[x-placement^="left"] .popper-arrow{
      border-left-color:$tooltip-fill;
      &::after{
        border-left-color:$tooltip-color;
      }
    }

    &[x-placement^="right"] .popper-arrow{
      border-right-color:$tooltip-fill;
      &::after{
        border-right-color:$tooltip-color;
      }
    }
  }

}