@import '../../style/themes/default.less';

.ele-tour {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: @zindex-modal;
  display: none;
}

.ele-tour-open {
  display: block;
}

/* 带高亮的遮罩 */
.ele-tour-box {
  position: absolute;
  border: 2px solid @primary-color;
  border-radius: @border-radius-base;
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
}

.ele-tour-mask .ele-tour-box {
  border: none;
  box-shadow: 0 0 0 1000vw @modal-mask-bg;
}

/* 气泡定位元素 */
.ele-tour-reference {
  position: absolute;
}

/* 标题 */
.ele-tour-title {
  font-weight: bold;
  color: @heading-color;
  margin-bottom: @margin-xs;
}

/* 内容 */
.ele-tour-text {
  font-size: @font-size-sm;
}

/* 底部 */
.ele-tour-footer {
  display: flex;
  align-items: center;
  margin-top: @margin-md;
}

/* 指示器 */
.ele-tour-counter {
  color: @text-color-secondary;
  font-size: @font-size-sm;
}

/* 操作按钮 */
.ele-tour-action {
  flex: 1;
  text-align: right;

  .ant-btn {
    font-size: @font-size-sm;

    & + .ant-btn {
      margin-left: @margin-xs;
    }
  }
}

/* 气泡弹窗效果 */
.ele-tour-popover.ele-tour-modal {
  padding: 0;
  width: 440px;
  right: 0;
  margin: 0 auto;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);

  &::after,
  .ant-popover-arrow {
    display: none;
  }
}

.ele-tour-reference + div {
  right: 0;
  bottom: 0;
}