@use "sass:math";
@use "./base";

// ===== popper =====
$popper-bg-color: base.color-gray(1) !default;
$popper-distance: base.padding(1) !default;
// popper 箭头距离被指元素 4px
$popper-with-arrow-distance: base.padding(2) !default;
// 箭头的宽度UI设计稿为8px，由于箭头是由正方形旋转得到的，所以正方形的宽度为 8 除以 根号2 约等于 6px
$popper-arrow-box-size: 6px !default;
//$popper-padding: padding(3) !default;
//$popper-padding-compact: padding(2) !default;
$popper-padding-vertical: base.padding(1) !default;
$popper-padding-horizontal: base.padding(2) !default;
$popper-with-arrow-padding-vertical: base.padding(2) !default;
$popper-with-arrow-padding-horizontal: base.padding(3) !default;

@mixin popper-box(
  $box-shadow: base.$box-shadow-popper,
  $border-radius: base.$border-radius-medium,
  $background: $popper-bg-color
) {
  & {
    background: $background;
    box-shadow: $box-shadow;
    border-radius: $border-radius;
    overflow: hidden;
  }
}

@mixin popper-distance($distance: $popper-distance, $className: '.brick-popper') {
  #{$className} {
    &[class*="brick-popper-placement-top"] {
      .brick-popper-wrap {
        padding-bottom: $distance;
      }
    }

    &[class*="brick-popper-placement-bottom"] {
      .brick-popper-wrap {
        padding-top: $distance;
      }
    }

    &[class*="brick-popper-placement-left"] {
      .brick-popper-wrap {
        padding-right: $distance;
      }
    }

    &[class*="brick-popper-placement-right"] {
      .brick-popper-wrap {
        padding-left: $distance;
      }
    }
  }
}

@mixin popper-arrow(
  $size: $popper-arrow-box-size,
  $color: $popper-bg-color,
  $distance: $popper-with-arrow-distance
) {
  $size-half: math.div($size, 2);
  // + 0.1 可以避免 windows chrome 出现白线
  $distance-offset: $size-half + $distance + 0.1px;
  & {
    position: absolute;
    width: 0;
    height: 0;
    display: none;
  }

  // 改用 clip-path 切掉，而不用 :after 遮盖了
  //&::after,
  &::before {
    display: inline-block;
    position: absolute;
    content: '';
    background: $color;
    // 反正切掉了，不需要只染色一半了
    //background: linear-gradient(135deg, transparent 0 50%, $color 50% 100%);
    width: $size;
    height: $size;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: base.$box-shadow-popper-arrow;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0);
  }
  &.direction {
    &-down, &-up, &-right, &-left {
      display: inline-block;
    }

    &-down {
      transform: rotate(0deg);
      bottom: $distance-offset;
    }

    &-up {
      transform: rotate(180deg);
      top: $distance-offset;
    }

    &-right {
      transform: rotate(-90deg);
      right: $distance-offset;
    }

    &-left {
      transform: rotate(90deg);
      left: $distance-offset;
    }
  }
}