@import './../theme/vars.scss';

$padding: 7px;
$arrowRelative: 10px + $padding; // 10px + $padding
$arrowAlineBottomRelative: 10px + $padding;
$popover-max-width: 250px;
$popoverPrefixCls: amos-popover;

.#{$popoverPrefixCls}-trigger {
  cursor: pointer;
  user-select: none;
}

.#{$popoverPrefixCls}-trigger-disabled,
.#{$popoverPrefixCls}-trigger-disabled * {
  color: $pop-disabled-color;
  cursor: not-allowed;
  background-color: $pop-disabled-bg;
  border-color: $pop-disabled-border-color;
  user-select: none;
}

.#{$popoverPrefixCls} {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;

  &::after {
    position: absolute;
    width: 0;
    height: 0;
    content: '';
  }
}

.#{$popoverPrefixCls}-animation {
  animation: amos-popover-anim 0.15s;
}

@keyframes amos-popover-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.#{$popoverPrefixCls}-up {
  padding-bottom: $padding;
  margin-top: -$padding;

  &::after {
    bottom: 1px;
    left: 50%;
    margin-left: -$padding;
    border-top: $padding - 1px solid white;
    border-right: $padding solid transparent;
    border-left: $padding solid transparent;
  }
}

.#{$popoverPrefixCls}-down {
  padding-top: $padding;

  &::after {
    top: 1px;
    left: 50%;
    margin-left: -$padding;
    border-right: $padding solid transparent;
    border-bottom: $padding - 1px solid white;
    border-left: $padding solid transparent;
  }
}

.#{$popoverPrefixCls}-left {
  padding-right: $padding;
  // fixed arrow left
  margin-left: -$padding;

  &::after {
    top: 50%;
    right: 1px;
    margin-top: -$padding;
    border-top: $padding solid transparent;
    border-bottom: $padding solid transparent;
    border-left: $padding - 1px solid white;
  }
}

.#{$popoverPrefixCls}-right {
  padding-left: $padding;

  &::after {
    top: 50%;
    left: 1px;
    margin-top: -$padding;
    border-top: $padding solid transparent;
    border-right: $padding - 1px solid white;
    border-bottom: $padding solid transparent;
  }
}

.#{$popoverPrefixCls}-align-left {
  &::after {
    left: $arrowRelative;
  }
}

.#{$popoverPrefixCls}-align-right {
  &::after {
    right: $arrowRelative;
    left: auto;
  }
}

.#{$popoverPrefixCls}-align-top {
  &::after {
    top: $arrowRelative;
  }
}

.#{$popoverPrefixCls}-align-bottom {
  &::after {
    top: auto;
    // bottom: $arrowRelative;
    bottom: $arrowAlineBottomRelative;
  }
}

.#{$popoverPrefixCls}-content {
  max-width: $popover-max-width;
  min-height: 36px;
  padding: 10px 12px;
  text-align: left;
  background: white;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}


//-- single pop
$innerPopCls: amos-single-pop;

.#{$innerPopCls} {
  display: inline-block;

  &.#{$innerPopCls}-dropdown {
    position: relative;
  }

  &-trigger {
    display: block;
    height: 50px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 50px;
    cursor: pointer;
  }

  &-content {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1;
    float: left;
    min-width: 100%;
    padding: 0;
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
    list-style: none;
    background-color: white;
    border: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: opacity 0.15s, visibility 0s 0.15s;
    background-clip: padding-box;
  }

  &:hover {
    .#{$innerPopCls}-content {
      opacity: 1;
      visibility: visible;
    }
  }
}