@import '../variables/default.scss';
@import '../mixins/index.scss';

$at-popover-overlay-padding: 10px * $hd;
$at-popover-arrow-offset: 7px * $hd;
$at-popover-arrow-size: 9px * $hd;
@function gen_arrow_shadow($xSign, $ySign) {
  @return $xSign * 1px * $hd $ySign * 1px * $hd 4px * $hd rgba(0, 0, 0, 0.1);
}

.at-popover {
  position: relative;

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: $color-bg-mask;
    height: 100%;
    z-index: $zindex-popup;

    &-hidden {
      display: none;
    }
  }

  &-overlay {
    position: absolute;
    z-index: $zindex-dropdown;

    &-hidden {
      display: none;
    }

    // left
    &.placement-cr-cl {
      top: 50%;
      right: 100%;
      padding-right: $at-popover-overlay-padding;
      transform: translate(0, -50%);

      & .at-popover-arrow {
        right: $at-popover-arrow-offset;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        border-left-color: transparent;
        border-bottom-color: transparent;
        box-shadow: gen_arrow_shadow(1, -1);
      }
    }

    // right
    &.placement-cl-cr {
      top: 50%;
      left: 100%;
      padding-left: $at-popover-overlay-padding;
      transform: translate(0, -50%);

      & .at-popover-arrow {
        left: $at-popover-arrow-offset;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        border-top-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, 1);
      }
    }

    // top
    &.placement-bc-tc {
      left: 50%;
      bottom: 100%;
      padding-bottom: $at-popover-overlay-padding;
      transform: translate(-50%, 0);

      & .at-popover-arrow {
        bottom: $at-popover-arrow-offset;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        border-left-color: transparent;
        border-top-color: transparent;
        box-shadow: gen_arrow_shadow(1, 1);
      }
    }

    // bottom
    &.placement-tc-bc {
      left: 50%;
      top: 100%;
      padding-top: $at-popover-overlay-padding;
      transform: translate(-50%, 0);

      & .at-popover-arrow {
        top: $at-popover-arrow-offset;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        border-bottom-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, -1);
      }
    }

    // topLeft
    &.placement-bl-tl {
      left: 0;
      bottom: 100%;
      padding-bottom: $at-popover-overlay-padding;

      & .at-popover-arrow {
        bottom: $at-popover-arrow-offset;
        left: $spacing-h-xl;
        border-left-color: transparent;
        border-top-color: transparent;
        box-shadow: gen_arrow_shadow(1, 1);
      }
    }

    // leftTop
    &.placement-tr-tl {
      right: 100%;
      top: 0;
      padding-right: $at-popover-overlay-padding;

      & .at-popover-arrow {
        right: $at-popover-arrow-offset;
        top: $spacing-v-lg;
        border-left-color: transparent;
        border-bottom-color: transparent;
        box-shadow: gen_arrow_shadow(1, -1);
      }
    }

    // topRight
    &.placement-br-tr {
      right: 0;
      bottom: 100%;
      padding-bottom: $at-popover-overlay-padding;

      & .at-popover-arrow {
        bottom: $at-popover-arrow-offset;
        right: $spacing-h-xl;
        border-left-color: transparent;
        border-top-color: transparent;
        box-shadow: gen_arrow_shadow(1, 1);
      }
    }

    // rightTop
    &.placement-tl-tr {
      left: 100%;
      top: 0;
      padding-left: $at-popover-overlay-padding;

      & .at-popover-arrow {
        left: $at-popover-arrow-offset;
        top: $spacing-v-lg;
        border-top-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, 1);
      }
    }

    // bottomRight
    &.placement-tr-br {
      right: 0;
      top: 100%;
      padding-top: $at-popover-overlay-padding;

      & .at-popover-arrow {
        top: $at-popover-arrow-offset;
        right: $spacing-h-xl;
        border-bottom-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, -1);
      }
    }

    // rightBottom
    &.placement-bl-br {
      left: 100%;
      bottom: 0;
      padding-left: $at-popover-overlay-padding;

      & .at-popover-arrow {
        left: $at-popover-arrow-offset;
        bottom: $spacing-v-lg;
        border-top-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, 1);
      }
    }

    // bottomLeft
    &.placement-tl-bl {
      left: 0;
      top: 100%;
      padding-top: $at-popover-overlay-padding;

      & .at-popover-arrow {
        top: $at-popover-arrow-offset;
        left: $spacing-h-xl;
        border-bottom-color: transparent;
        border-right-color: transparent;
        box-shadow: gen_arrow_shadow(-1, -1);
      }
    }

    // leftBottom
    &.placement-br-bl {
      right: 100%;
      bottom: 0;
      padding-right: $at-popover-overlay-padding;

      & .at-popover-arrow {
        right: $at-popover-arrow-offset;
        bottom: $spacing-v-lg;
        border-left-color: transparent;
        border-bottom-color: transparent;
        box-shadow: gen_arrow_shadow(1, -1);
      }
    }
  }

  &-inner {
    font-size: $font-size-lg;
    color: $color-text-base;
    background-color: $color-bg;
    border-radius: $border-radius-md;
    box-shadow: $at-popover-shadow;
    overflow: hidden;
  }

  &-arrow {
    position: absolute;
    width: $at-popover-arrow-size;
    height: $at-popover-arrow-size;
    border: $at-popover-arrow-size / 2 solid #fff;
    border-radius: $border-radius-sm;
    transform: rotate(45deg);
    z-index: 0;
    box-sizing: border-box;
  }
}