@import "../vars.less";
@import "../transition.less";

.hive-popup {
  position: absolute;
  z-index: 10001;
  box-shadow: @shadow-level-2;
  background: #fff;
  padding: 16px;
  overflow: hidden;
  border-radius: @popup-border-radius-default;
}

@transform-x: 5px;
@transfrom-y: @transform-x;

.@{flow}-leave-to[class*='hive-popup--p-top-'],
.@{flow}-enter[class*='hive-popup--p-top-'] {
  transform: translateY(@transfrom-y);
  opacity: 0;
}

// left
.@{flow}-enter[class*='hive-popup--p-left-'],
.@{flow}-leave-to[class*='hive-popup--p-left-'] {
  transform: translateX(@transform-x);
  opacity: 0;
}

// right
.@{flow}-enter[class*='hive-popup--p-right-'],
.@{flow}-leave-to[class*='hive-popup--p-right-'] {
  transform: translateX(-@transform-x);
  opacity: 0;
}

// bottom
.@{flow}-leave-to[class*='hive-popup--p-bottom-'],
.@{flow}-enter[class*='hive-popup--p-bottom-'] {
  transform: translateY(-@transfrom-y);
  opacity: 0;
}