@alifd/next/lib/balloon/rtl.scss

@mixin tooltip-arrow-rtl($width) {

    &.#{$css-prefix}balloon-tooltip-right .#{$css-prefix}balloon-arrow {
        left: calc(0px - (#{$width} * 2));
        right: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX($width) rotate(45deg);
        }
    }

    &.#{$css-prefix}balloon-tooltip-left .#{$css-prefix}balloon-arrow {
        right: calc(0px - (#{$width} * 2));
        left: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
        }
    }
    &.#{$css-prefix}balloon-tooltip-left-top .#{$css-prefix}balloon-arrow {
        right: calc(0px - (#{$width} * 2));
        left: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
        }
    }
    &.#{$css-prefix}balloon-tooltip-left-bottom .#{$css-prefix}balloon-arrow {
        right: calc(0px - (#{$width} * 2));
        left: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
        }
    }

    &.#{$css-prefix}balloon-tooltip-right-top .#{$css-prefix}balloon-arrow {
        left: calc(0px - (#{$width} * 2));
        right: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX($width) rotate(45deg);
        }
    }

    &.#{$css-prefix}balloon-tooltip-right-bottom .#{$css-prefix}balloon-arrow {
        left: calc(0px - (#{$width} * 2));
        right: auto;
        .#{$css-prefix}balloon-arrow-content {
            transform: translateX($width) rotate(45deg);
        }
    }

    &.#{$css-prefix}balloon-tooltip-top-left .#{$css-prefix}balloon-arrow {
        right: calc(#{$balloon-size-arrow-margin} - 2px);
        left: auto;
    }

    &.#{$css-prefix}balloon-tooltip-top-right .#{$css-prefix}balloon-arrow {
        left: calc(#{$balloon-size-arrow-margin} - 2px);
        right: auto;
    }

    &.#{$css-prefix}balloon-tooltip-bottom-left .#{$css-prefix}balloon-arrow {
        right: calc(#{$balloon-size-arrow-margin} - 2px);
        left: auto;
    }

    &.#{$css-prefix}balloon-tooltip-bottom-right .#{$css-prefix}balloon-arrow {
        left: calc(#{$balloon-size-arrow-margin} - 2px);
        right: auto;
    }
}

@mixin balloon-close-rtl(
    $left
) {
    .#{$css-prefix}balloon-close {
        left: $left;
        right: auto;
    }
}

@mixin balloon-arrow-rtl(
    $arrorExpose
) {
    // 小三角不需要阴影
    $shadow-top: null;
    $shadow-right: null;
    $shadow-bottom: null;
    $shadow-left: null;

    &.#{$css-prefix}balloon-right:after {
        left: $arrorExpose;
        right: auto;
        border-right: none;
        border-top: none;
        border-left: inherit;
        border-bottom: inherit;
        box-shadow: $shadow-left;
    }
    &.#{$css-prefix}balloon-left:after {
        right: $arrorExpose;
        left: auto;
        border-left: none;
        border-bottom: none;
        border-right: inherit;
        border-top: inherit;
        box-shadow: $shadow-right;
    }
    &.#{$css-prefix}balloon-left-top:after {
        right: $arrorExpose;
        left: auto;
        border-left: none;
        border-bottom: none;
        border-top: inherit;
        border-right: inherit;
        box-shadow: $shadow-right;
    }
    &.#{$css-prefix}balloon-left-bottom:after {
        right: $arrorExpose;
        left: auto;
        border-left: none;
        border-bottom: none;
        border-top: inherit;
        border-right: inherit;
        box-shadow: $shadow-right;
    }

    &.#{$css-prefix}balloon-right-top:after {
        left: $arrorExpose;
        right: auto;
        border-right: none;
        border-top: none;
        border-bottom: inherit;
        border-left: inherit;
        box-shadow: $shadow-left;
    }

    &.#{$css-prefix}balloon-right-bottom:after {
        left: $arrorExpose;
        right: auto;
        border-right: none;
        border-top: none;
        border-bottom: inherit;
        border-left: inherit;
        box-shadow: $shadow-left;
    }

    &.#{$css-prefix}balloon-top-left:after {
        right: $balloon-size-arrow-margin;
        left: auto;
    }

    &.#{$css-prefix}balloon-top-right:after {
        right: auto;
        left: $balloon-size-arrow-margin;
    }

    &.#{$css-prefix}balloon-bottom-left:after {
        right: $balloon-size-arrow-margin;
        left: auto;
    }

    &.#{$css-prefix}balloon-bottom-right:after {
        left: $balloon-size-arrow-margin;
        right: auto;
    }
}

.#{$css-prefix}balloon[dir="rtl"] {
    &.#{$css-prefix}balloon-primary {
        @include balloon-close-rtl(
            $balloon-size-close-margin-right
        );
        @include balloon-arrow-rtl(
            $balloon-size-arrow-expose-primary
        );
    }

    &.#{$css-prefix}balloon-normal {
        @include balloon-close-rtl(
            $balloon-size-close-margin-right
        );
        @include balloon-arrow-rtl(
            $balloon-size-arrow-expose
        );
    }

    /* 带关闭按钮的右侧padding变大 */
    &.#{$css-prefix}balloon-closable {
        @include balloon-size($balloon-size-padding-top, $balloon-size-padding-right, $balloon-size-padding-top, $balloon-size-padding-closable-right);
    }
}

.#{$css-prefix}balloon-tooltip[dir="rtl"] {

    @include tooltip-arrow-rtl($balloon-size-arrow-size);

    /* size */
    &.#{$css-prefix}balloon-tooltip-medium {
        @include balloon-size($balloon-tooltip-size-padding-top, $balloon-tooltip-size-padding-left, $balloon-tooltip-size-padding-bottom, $balloon-tooltip-size-padding-right);
    }
}