@import './theme/default.pcss';

/* FIXME: these two values couples with ARROW_OFFSET in postion.js */
$arrow-offset: 14px;
$arrow-size: 6px;
$arrow-cover-size: 11px;

.zent-pop {
  border-radius: 2px;
  box-shadow: 0 1px 6px $theme-mask-2;
  background-color: $theme-stroke-10;
  z-index: 2000;
  font-size: 12px;

  .zent-pop-inner,
  .zent-pop-header {
    position: relative;
    background: $theme-stroke-10;
    border-radius: 2px;
    padding: 10px 20px;
    z-index: 2;
    color: $theme-stroke-1;
  }

  .zent-pop-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .zent-pop-header {
    border-bottom: 1px solid $theme-stroke-7;
  }

  .zent-pop-buttons {
    min-width: 160px;
    text-align: right;
    margin-right: 0;
    margin-top: 10px;
  }

  .zent-pop-arrow {
    position: absolute;
    z-index: 1;
    width: $arrow-size;
    height: $arrow-size;
    background: $theme-stroke-10;
    box-shadow: 0 1px 4px $theme-mask-2;
    overflow: hidden;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: $arrow-cover-size;
    height: $arrow-cover-size;
  }

  &.zent-popover-position {
    /* bottom side */
    &-bottom-left,
    &-bottom-center,
    &-bottom-right {
      .zent-pop-arrow {
        top: 0;
      }

      &::after {
        top: -$arrow-cover-size;
        width: 100%;
        left: 0;
      }
    }

    &-bottom-left {
      .zent-pop-arrow {
        transform: translateY(-50%) rotate(45deg);
        left: $arrow-offset;
      }
    }

    &-bottom-center {
      .zent-pop-arrow {
        transform: translate(-50%, -50%) rotate(45deg);
        left: 50%;
      }
    }

    &-bottom-right {
      .zent-pop-arrow {
        transform: translateY(-50%) rotate(45deg);
        right: $arrow-offset;
      }
    }

    /* top side */
    &-top-left,
    &-top-center,
    &-top-right {
      .zent-pop-arrow {
        bottom: 0;
      }

      &::after {
        bottom: -$arrow-cover-size;
        width: 100%;
        left: 0;
      }
    }

    &-top-left {
      .zent-pop-arrow {
        transform: translateY(50%) rotate(45deg);
        left: $arrow-offset;
      }
    }

    &-top-center {
      .zent-pop-arrow {
        transform: translate(-50%, 50%) rotate(45deg);
        left: 50%;
      }
    }

    &-top-right {
      .zent-pop-arrow {
        transform: translateY(50%) rotate(45deg);
        right: $arrow-offset;
      }
    }

    /* left side */
    &-left-top,
    &-left-center,
    &-left-bottom {
      .zent-pop-arrow {
        right: 0;
      }

      &::after {
        right: -$arrow-cover-size;
        height: 100%;
        top: 0;
      }
    }

    &-left-top {
      .zent-pop-arrow {
        transform: translateX(50%) rotate(45deg);
        top: $arrow-offset;
      }
    }

    &-left-center {
      .zent-pop-arrow {
        transform: translate(50%, -50%) rotate(45deg);
        top: 50%;
      }
    }

    &-left-bottom {
      .zent-pop-arrow {
        transform: translateX(50%) rotate(45deg);
        bottom: $arrow-offset;
      }
    }

    /* left side */
    &-right-top,
    &-right-center,
    &-right-bottom {
      .zent-pop-arrow {
        left: 0;
      }

      &::after {
        left: -$arrow-cover-size;
        height: 100%;
        top: 0;
      }
    }

    &-right-top {
      .zent-pop-arrow {
        transform: translateX(-50%) rotate(45deg);
        top: $arrow-offset;
      }
    }

    &-right-center {
      .zent-pop-arrow {
        transform: translate(-50%, -50%) rotate(45deg);
        top: 50%;
      }
    }

    &-right-bottom {
      .zent-pop-arrow {
        transform: translateX(-50%) rotate(45deg);
        bottom: $arrow-offset;
      }
    }
  }
}