
@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/balloon/scss/variable';
@import '~@alifd/next/lib/balloon/scss/mixin';

// 1. popover样式
.#{$css-prefix}balloon {
  padding: $b-design-balloon-padding-complicated;
  // 1.1 基本边距高度等样式
  &.#{$css-prefix}balloon-normal,
  &.#{$css-prefix}balloon-dark {
    box-shadow: $b-design-balloon-white-box-shadow;
    .#{$css-prefix}balloon-content {
      line-height: $b-design-balloon-content-line-height;
      p {
        line-height: $b-design-balloon-content-line-height;
        margin: 0;
      }
    }
    /* 1.1.1 设置小箭头的大小(两种模式) */
    &.#{$css-prefix}balloon-normal::after,
    &.#{$css-prefix}balloon-dark::after {
      height: $b-design-balloon-arrow-size;
      width: $b-design-balloon-arrow-size;
    }

    /* 1.1.2 设置带叉号的padding */
    &.#{$css-prefix}add-closable {
      // 2. 调整normal时候的叉号位置

      padding-right: $s-7;
      .#{$css-prefix}balloon-close {
        top: $b-design-balloon-close-top;
        right: $s-2;
        height: $s-4;
        width: $s-4;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: $s-4;
        .#{$css-prefix}icon-close {
          height: $s-2;
          width: $s-2;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .#{$css-prefix}icon-close::before {
          height: $s-2;
          width: $s-2;
          font-size: $s-2;
        }
      }
    }

    /* 1.1.3 调整带标题的样式*/
    &.#{$css-prefix}balloon-with-title {
      padding: 10px $b-design-balloon-with-title-padding
        $b-design-balloon-with-title-padding
        $b-design-balloon-with-title-padding;
      .#{$css-prefix}balloon-title {
        font-size: $b-design-balloon-with-title-font-size;
        line-height: $b-design-balloon-title-line-height;
        height: $b-design-balloon-title-line-height;
        margin: 0 0 $b-design-balloon-with-title-padding-b 0;
      }
      .#{$css-prefix}balloon-close {
        position: absolute;
        top: $b-design-balloon-with-title-padding-b;
      }
    }
  }

  // 2. 设置dark时候的颜色
  &.#{$css-prefix}balloon-dark {
    position: absolute;
    background: $b-design-balloon-dark-backgrond;
    box-shadow: $b-design-balloon-dark-box-shadow;
    border: transparent;
    // 2.1 文字样式
    .#{$css-prefix}balloon-content {
      color: $b-design-balloon-text-color;
    }
    // 2.2 箭头样式
    &.#{$css-prefix}balloon-dark::after {
      content: '';
      position: absolute;
      top: $b-design-balloon-dark-arrow-top;
      left: calc(50% - 5px);
      width: 0;
      height: 0;
      border-width: 0 $b-design-balloon-arrow-size $b-design-balloon-arrow-size;
      border-style: solid;
      border-color: transparent transparent $b-design-balloon-dark-backgrond;
    }
    // 2.3 叉号样式
    &.#{$css-prefix}balloon-closable {
      .#{$css-prefix}balloon-close {
        position: absolute;
        top: 8px;
        cursor: pointer;
        color: $b-design-balloon-dark-arrow-color;
      }
    }
  }
}

// 2. tooltip的样式
.#{$css-prefix}balloon-tooltip {
  background-clip: padding-box;
  background-color: $b-design-balloon-dark-backgrond;
  border: 1px solid $b-design-balloon-dark-backgrond;
  box-shadow: $popup-global-shadow;
  min-height: $s-9;
  .#{$css-prefix}balloon-arrow {
    .#{$css-prefix}balloon-arrow-content {
      width: $b-design-balloon-arrow-size;
      height: $b-design-balloon-arrow-size;
      opacity: 0.8;
    }
  }

  &.#{$css-prefix}balloon-tooltip-bottom,
  &.#{$css-prefix}balloon-tooltip-bottom-left,
  &.#{$css-prefix}balloon-tooltip-bottom-right {
    .#{$css-prefix}balloon-arrow {
      bottom: -17px;
    }
  }

  &.#{$css-prefix}balloon-tooltip-right,
  &.#{$css-prefix}balloon-tooltip-right-bottom,
  &.#{$css-prefix}balloon-tooltip-right-top {
    .#{$css-prefix}balloon-arrow {
      right: -17px;
    }
  }

  &.#{$css-prefix}balloon-tooltip-left,
  &.#{$css-prefix}balloon-tooltip-left-bottom,
  &.#{$css-prefix}balloon-tooltip-left-top {
    .#{$css-prefix}balloon-arrow {
      left: -17px;
    }
  }

  &.#{$css-prefix}balloon-tooltip-top,
  &.#{$css-prefix}balloon-tooltip-top-left,
  &.#{$css-prefix}balloon-tooltip-top-right {
    .#{$css-prefix}balloon-arrow {
      top: -17px;
    }
  }

  // 设置content
  .#{$css-prefix}balloon-content {
    line-height: $b-design-balloon-content-line-height;
    min-height: $b-design-balloon-content-line-height;
  }
}

// 3. 设置行动相关样式
.#{$css-prefix}balloon-with-action {
  // 1. 设置content
  .#{$css-prefix}balloon-content {
    padding-bottom: $b-design-balloon-action-content-padding-b;
    .#{$css-prefix}balloon-action {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: $b-design-balloon-action-margin;
      position: relative;
      // 设置链接样式
      .#{$css-prefix}has-action-link {
        position: absolute;
        left: 0px;
        top: 3px;
        height: 18px;
        line-height: 18px;
      }
      // 设置按钮样式
      .#{$css-prefix}has-action-button {
        position: absolute;
        right: 0px;
      }
      // 没有props就隐藏链接/按钮
      .#{$css-prefix}action-hidden {
        display: none;
      }
    }
  }
}
