@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "./scss/variable";
@import "./scss/mixin";

.#{$css-prefix}balloon {
    @include box-sizing;
    @include balloon-bounding($balloon-border-style);

    font-size: $balloon-content-font-size;
    font-weight: $balloon-content-font-weight;
    /* stylelint-disable */
    word-wrap: break-all;
    word-wrap: break-word;
    /* stylelint-enable */
    z-index: 0;
    &:focus,
    & *:focus {
        outline: 0;
    }

    &-title {
        margin-bottom: $balloon-size-header-margin-bottom;
        font-size: $balloon-title-font-size;
        font-weight: $balloon-title-font-weight;

        &.#{$css-prefix}balloon-closable {
            @include balloon-size(0, $balloon-size-padding-closable-right, 0, 0);
            .#{$css-prefix}balloon-close {
                top: -1px;
                transform: translateY(calc(#{$balloon-size-padding-top} + (#{$balloon-title-font-size} - #{$balloon-size-close}) / 2));
                right: $balloon-size-padding-right;
            }
        }
    }

    &-primary {
        @include balloon-state(
            $balloon-primary-color,
            $balloon-primary-color-border,
            $balloon-primary-color-bg,
            $balloon-primary-shadow,
            $balloon-primary-border-width
        );
        @include balloon-close(
            $balloon-size-close-margin-top,
            $balloon-size-close-margin-right,
            $balloon-size-close,
            $balloon-primary-color-close,
            $balloon-primary-color-close-hover
        );
        @include balloon-arrow(
            $balloon-size-arrow-size,
            $balloon-size-arrow-size,
            $balloon-primary-color-border,
            $balloon-primary-color-bg,
            $balloon-primary-border-width
        );
    }

    &-normal {
        @include balloon-state(
            $balloon-normal-color,
            $balloon-normal-color-border,
            $balloon-normal-color-bg,
            $balloon-normal-shadow,
            $balloon-normal-border-width
        );
        @include balloon-close(
            $balloon-size-close-margin-top,
            $balloon-size-close-margin-right,
            $balloon-size-close,
            $balloon-normal-color-close,
            $balloon-normal-color-close-hover
        );
        @include balloon-arrow(
            $balloon-size-arrow-size,
            $balloon-size-arrow-size,
            $balloon-normal-color-border,
            $balloon-normal-color-bg,
            $balloon-normal-border-width
        );
    }

    @include show-hidden();

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

.#{$css-prefix}balloon-tooltip {
    @include box-sizing;
    @include balloon-bounding($balloon-tooltip-border-style);

    font-size: $balloon-tooltip-content-font-size;
    font-weight: $balloon-tooltip-content-font-weight;
    z-index: 0;
    /* stylelint-disable */
    word-wrap: break-all;
    word-wrap: break-word;
    /* stylelint-enable */

    @include tooltip-state(
        $balloon-tooltip-color,
        $balloon-tooltip-color-border,
        $balloon-tooltip-color-bg,
        $balloon-tooltip-shadow,
        $balloon-tooltip-border-width
    );

    @include tooltip-arrow(
        $balloon-size-arrow-size,
        $balloon-size-arrow-size,
        $balloon-tooltip-color-border,
        $balloon-tooltip-color-bg
    );

    @include show-hidden();

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

@import "./rtl.scss";