@use '../_styles/_variables.scss' as *;
@use 'sass:color';

$popup-prefix: '#{$prefix}-popup';

.#{$popup-prefix} {
  position: absolute;
  background-color: $bg-color-container;
  color: $text-color-base;
  font-size: 13px;
  border-radius: $border-radius;
  z-index: 1000;
  box-sizing: border-box;
  text-align: center;
  box-shadow: $shadow-popup, $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
  &-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: $bg-color-container;
      transform: rotate(45deg);
      transform-origin: center;
    }
  }

  &-content {
    padding: 4px 8px;
  }

  // 上方弹出，箭头在底部
  &[data-popup-placement^='top'] > &-arrow {
    bottom: -4px;
  }
  &[data-popup-placement^='top'] > &-arrow::before {
    box-shadow: $shadow-inset-left, $shadow-inset-bottom;
  }

  // 下方弹出，箭头在顶部
  &[data-popup-placement^='bottom'] > &-arrow {
    top: -4px;
  }
  &[data-popup-placement^='bottom'] > &-arrow::before {
    box-shadow: $shadow-inset-top, $shadow-inset-right;
  }

  // 左侧弹出，箭头在右侧
  &[data-popup-placement^='left'] > &-arrow {
    right: -4px;
  }
  &[data-popup-placement^='left'] > &-arrow::before {
    box-shadow: $shadow-inset-left, $shadow-inset-top;
  }

  // 右侧弹出，箭头在左侧
  &[data-popup-placement^='right'] > &-arrow {
    left: -4px;
  }
  &[data-popup-placement^='right'] > &-arrow::before {
    box-shadow: $shadow-inset-right, $shadow-inset-bottom;
  }
}

/* 普通淡入淡出动画 */
.popup-fade-enter-from,
.popup-fade-leave-to {
  opacity: 0;
}

.popup-fade-enter-to,
.popup-fade-leave-from {
  opacity: 1;
}

.popup-fade-enter-active,
.popup-fade-leave-active {
  transition: opacity 0.2s ease;
}