@charset "utf-8";
@import "./var";

/**
 * 气泡(bubble)
 * by wenjuli
 */

.#{$prefix}bubble {
    position: relative; //bubble仅做展示，外面多加一层包裹来定位，不要修改这里的position
    color: $bubble-default-color-text;
    max-width: $bubble-width-max;
    display: inline-block;
}

.#{$prefix}bubble .#{$prefix}bubble__inner:before,
.#{$prefix}bubble .#{$prefix}bubble__inner:after {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    content: '';
    border: $bubble-triangle-width dashed transparent;
}

.#{$prefix}bubble .#{$prefix}bubble__inner:after {
    border: ($bubble-triangle-width - 1px) dashed transparent;
}

.#{$prefix}bubble__inner {
    font-size: $bubble-font-size;
    -moz-box-sizing: border-box;
    padding: 12px;
    // border: 1px solid $bubble-default-color-border;
    border-radius: $bubble-border-radius;
    background-color: $bubble-default-color-bg;
    line-height: $line-height-default;
    box-shadow: $bubble-box-shadow;
    position: static !important;
    left: 50%;
    top: 50%;
    color: $bubble-default-color-text;
    box-sizing: border-box;
    white-space: normal;
    word-wrap:break-word;
    word-break:break-word;
}
.#{$prefix}bubble__header{
    .#{$prefix}justify-grid__col--right{
        padding-left:20px;
    }
}
.#{$prefix}bubble__header {

}


/* Start 第一版的黑色气泡，当做tooltips用 */
.#{$prefix}bubble--dark .#{$prefix}bubble__inner{
    padding:3px 7px;
    color: $bubble-dark-color-text;
    background-color:$bubble-dark-color-bg;
    border-color: $bubble-dark-color-border;
    box-shadow: inherit;
    word-break: break-word;
    border-radius: $bubble-tooltips-border-radius;
}
.#{$prefix}bubble--dark .#{$prefix}bubble__inner:before,
.#{$prefix}bubble--dark .#{$prefix}bubble__inner:after{
    display: none;
}
/* End 第一版的黑色气泡，当做tooltips用 */


/*黑色气泡 S*/
.#{$prefix}bubble--reverse {
    .#{$prefix}bubble__inner{
        color: $bubble-dark-color-text;
        background-color:$bubble-dark-color-bg;
        border-color: $bubble-dark-color-border;
    }
    
    .#{$prefix}bubble__header [class*=tea-h],
    .#{$prefix}bubble__header h3,
    .#{$prefix}bubble__body{
        color: $bubble-dark-color-text;
    }
}
 
/*up arrow*/
.#{$prefix}bubble--reverse.#{$prefix}bubble--top .#{$prefix}bubble__inner:before{
    border-bottom-color: $bubble-dark-color-border;
}
.#{$prefix}bubble--reverse.#{$prefix}bubble--top .#{$prefix}bubble__inner:after{
    border-bottom-color: $bubble-dark-color-border;
}


/*right arrow*/
.#{$prefix}bubble--reverse.#{$prefix}bubble--right .#{$prefix}bubble__inner:before{
    border-left-color: $bubble-dark-color-border;
}
.#{$prefix}bubble--reverse.#{$prefix}bubble--right .#{$prefix}bubble__inner:after{
    border-left-color: $bubble-dark-color-border;
}


/*bottom arrow*/
.#{$prefix}bubble--reverse.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:before {
    border-top-color: $bubble-dark-color-border;
}
.#{$prefix}bubble--reverse.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after{
    border-top-color: $bubble-dark-color-border;
}


/*top arrow*/
.#{$prefix}bubble--reverse.#{$prefix}bubble--left .#{$prefix}bubble__inner:before{
    border-right-color: $bubble-dark-color-border;
}
.#{$prefix}bubble--reverse.#{$prefix}bubble--left .#{$prefix}bubble__inner:after{
    border-right-color: $bubble-dark-color-border;
}
/*黑色气泡 E*/




/* error S*/
.#{$prefix}bubble--error .#{$prefix}bubble__inner{
    color: $bubble-error-color-text;
    background-color: $bubble-error-color-bg;
    border-color: $bubble-error-color-border;
    box-shadow: inherit;
}


/*up arrow*/
.#{$prefix}bubble--error.#{$prefix}bubble--top .#{$prefix}bubble__inner:before{
    border-bottom-color: $bubble-error-color-border;
}
.#{$prefix}bubble--error.#{$prefix}bubble--top .#{$prefix}bubble__inner:after{
    border-bottom-color: $bubble-error-color-border;
}


/*right arrow*/
.#{$prefix}bubble--error.#{$prefix}bubble--right .#{$prefix}bubble__inner:before{
    border-left-color: $bubble-error-color-border;
}
.#{$prefix}bubble--error.#{$prefix}bubble--right .#{$prefix}bubble__inner:after{
    border-left-color: $bubble-error-color-border;
}


/*bottom arrow*/
.#{$prefix}bubble--error.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:before {
    border-top-color: $bubble-error-color-border;
}
.#{$prefix}bubble--error.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after{
    border-top-color: $bubble-error-color-border;
}


/*top arrow*/
.#{$prefix}bubble--error.#{$prefix}bubble--left .#{$prefix}bubble__inner:before{
    border-right-color: $bubble-error-color-border;
}
.#{$prefix}bubble--error.#{$prefix}bubble--left .#{$prefix}bubble__inner:after{
    border-right-color: $bubble-error-color-border;
}


/* error E*/


/*end*/

// .#{$prefix}bubble.tooltips .#{$prefix}bubble__inner {
//     padding: 3px 10px;
// }

.#{$prefix}bubble--top .#{$prefix}bubble__inner:before,
.#{$prefix}bubble--top .#{$prefix}bubble__inner:after {
    bottom: 100%;
    left: inherit;
    right: inherit;
    margin-bottom: -1px;
    border-bottom-style: solid;
}

.#{$prefix}bubble--top .#{$prefix}bubble__inner:before {
    margin-left: -6px;
    border-bottom-color: $bubble-default-color-border;
}

.#{$prefix}bubble--top .#{$prefix}bubble__inner:after {
    margin-left: -5px;
    border-bottom-color: $bubble-default-color-bg;
}

.#{$prefix}bubble--right .#{$prefix}bubble__inner:before,
.#{$prefix}bubble--right .#{$prefix}bubble__inner:after {
    top: inherit;
    bottom: inherit;
    left: 100%;
    margin-left: -1px;
    border-left-style: solid;
}

.#{$prefix}bubble--right .#{$prefix}bubble__inner:before {
    margin-top: -8px;
    border-left-color: $bubble-default-color-border;
}

.#{$prefix}bubble--right .#{$prefix}bubble__inner:after {
    margin-top: -7px;
    border-left-color: $bubble-default-color-bg;
}

.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:before,
.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after {
    top: 100%;
    left: inherit;
    right: inherit;
    margin-top: -1px;
    border-top-style: solid;
}

.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:before {
    margin-left: -6px;
    border-top-color: $bubble-default-color-border;
}

.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after {
    margin-left: -5px;
    border-top-color: $bubble-default-color-bg;
}

.#{$prefix}bubble--left .#{$prefix}bubble__inner:before,
.#{$prefix}bubble--left .#{$prefix}bubble__inner:after {
    top: inherit;
    bottom: inherit;
    right: 100%;
    margin-right: -1px;
    border-right-style: solid;
}

.#{$prefix}bubble--left .#{$prefix}bubble__inner:before {
    margin-top: -7px;
    border-right-color: $bubble-default-color-border;
}

.#{$prefix}bubble--left .#{$prefix}bubble__inner:after {
    margin-top: -6px;
    border-right-color: $bubble-default-color-bg;
}

//三角位于开始或结尾
.#{$prefix}bubble--start.#{$prefix}bubble--top .#{$prefix}bubble__inner,
.#{$prefix}bubble--start.#{$prefix}bubble--bottom .#{$prefix}bubble__inner {
    left: 26px;
}
.#{$prefix}bubble--start.#{$prefix}bubble--left .#{$prefix}bubble__inner,
.#{$prefix}bubble--start.#{$prefix}bubble--right .#{$prefix}bubble__inner {
    top: 26px; 
}

.#{$prefix}bubble--end.#{$prefix}bubble--top .#{$prefix}bubble__inner,
.#{$prefix}bubble--end.#{$prefix}bubble--bottom .#{$prefix}bubble__inner {
    left: auto;
    right: 20px;
}

.#{$prefix}bubble--end.#{$prefix}bubble--top .#{$prefix}bubble__inner:after,
.#{$prefix}bubble--end.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after {
    margin-right: 1px;
}

.#{$prefix}bubble--end.#{$prefix}bubble--left .#{$prefix}bubble__inner,
.#{$prefix}bubble--end.#{$prefix}bubble--right .#{$prefix}bubble__inner { 
    top: auto;
    bottom: 20px;
}

.#{$prefix}bubble--end.#{$prefix}bubble--left .#{$prefix}bubble__inner:after,
.#{$prefix}bubble--end.#{$prefix}bubble--right .#{$prefix}bubble__inner:after {
    margin-bottom: 1px;
}

// 待关闭
.#{$prefix}bubble--close{
    .#{$prefix}icon-close{
        background-image:url(../../assets/image/slice/svg/delete-icon-white.svg?fill=#fff);
    }    
}