@import './function';

// animation
@include animate-fadeInDown;

$outset: #94c7ff;
$inset : #f6faff;

.rui-tooltip {
  display:none;
  @include prefixer('border-radius', 6px);
  background:#f6faff;
  border:1px solid #94c7ff;
  color:$text2;
  padding:10px;
  min-width:130px;
  line-height:24px;
  position:absolute;
  z-index:1001;
  top:0;
  left:0;

  @extend .fadeInDown;

  &-arrow {
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:10px solid #94c7ff;
    position:absolute;

    &.arrow-top-center {
      border-color: #{$outset} transparent transparent;
    }

    &.arrow-bottom-right {
      border-color:#{$outset} transparent transparent;
    }

    &.arrow-bottom-center {
      border-color:transparent transparent #{$outset};
    }

    &.arrow-middle-left {
      border-color:transparent transparent transparent #{$outset};
    }

    &.arrow-middle-right {
      border-color:transparent #{$outset} transparent transparent;
    }

    &.arrow-top-left {
      border-color:#{$outset} transparent transparent transparent;
      border-width:20px 10px 10px;
      @include prefixer('transform', rotate(-45deg));
    }

    &.arrow-bottom-left {
      border-color:transparent transparent #{$outset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(45deg));
    }

    &.arrow-top-right {
      border-color:transparent transparent #{$outset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(-135deg));
    }

    &.arrow-bottom-right {
      border-color:transparent transparent #{$outset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(-45deg));
    }
  }

  &-arrow-back {
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:10px solid #{$inset};
    position:absolute;

    &.arrow-back-top-center {
      border-color: #{$inset} transparent transparent;
    }

    &.arrow-back-bottom-right {
      border-color:#{$inset} transparent transparent;
    }

    &.arrow-back-bottom-center {
      border-color:transparent transparent #{$inset};
    }

    &.arrow-back-middle-left {
      border-color:transparent transparent transparent #{$inset};
    }

    &.arrow-back-middle-right {
      border-color:transparent #{$inset} transparent transparent;
    }

    &.arrow-back-top-left {
      border-color:#{$inset} transparent transparent transparent;
      border-width:20px 10px 10px;
      @include prefixer('transform', rotate(-45deg));
    }

    &.arrow-back-bottom-left {
      border-color:transparent transparent #{$inset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(45deg));
    }

    &.arrow-back-top-right {
      border-color:transparent transparent #{$inset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(-135deg));
    }

    &.arrow-back-bottom-right {
      border-color:transparent transparent #{$inset} transparent;
      border-width:10px 10px 20px;
      @include prefixer('transform', rotate(-45deg));
    }
  }
}