@unactive-background-color: @yee-primary-color;
@active-background-color: @yee-primary-color;

@click-border-width: 2px;
@hover-border-width: 1px;
/* ---------------------------------- click --------------------------------- */
.config-active {
  position: relative;
  outline: @click-border-width solid @yee-primary-color;

  @vertical-offset: 24px;
  @horizontal-offset: 2px;
  .rightTop {
    top: -@vertical-offset;
    right: -@horizontal-offset;
  }
  .rightBottom {
    top: 0;
    right: -@horizontal-offset;
  }
  .leftTop {
    top: -@vertical-offset;
    left: -@horizontal-offset;
  }
  .leftBottom {
    top: 0;
    left: -@horizontal-offset;
  }
}
/* click 与 hover 的上下级定义顺序不要变, 保证 hover 优先级高于 click, 这种情况存在于外层 click, 内层 hover 的情况 */
/* ---------------------------------- hover --------------------------------- */
.hover-active {
  position: relative;
  outline: @hover-border-width dashed @yee-primary-color;

  @vertical-offset: 23px;
  @horizontal-offset: 1px;
  .rightTop {
    top: -@vertical-offset;
    right: -@horizontal-offset;
  }
  .rightBottom {
    top: 0;
    right: -@horizontal-offset;
  }
  .leftTop {
    top: -@vertical-offset;
    left: -@horizontal-offset;
  }
  .leftBottom {
    top: 0;
    left: -@horizontal-offset;
  }
}

/* ----------------------------- hover, click 通用 ---------------------------- */
@status-selector: hover-active, config-active;
each(@status-selector, {
  .@{value} {
    & > .config-handle {
      position: absolute;
      z-index: 1 !important;

      .config-handle-content {
        position: relative;
      }

      /* ----------------------------------- 容器 ----------------------------------- */
      & .badge {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        user-select: none;
        letter-spacing: 0.04em;
        white-space: nowrap;
        color: #fff;
        cursor: pointer;

        /* -------------------------------- 组件 id 标识 -------------------------------- */
        .badge-button {
          display: inline-block;
          vertical-align: middle;
          padding: 2px 8px;
          font-size: 12px;
          background: if((@value = hover-active), @unactive-background-color, @yee-primary-color);
          border-radius: 2px 2px 0px 0px;
        }

        /* -------------------------------- 快捷操作 -------------------------------- */
        .action-part {
          margin-left: 1px;
          svg {
            background: @unactive-background-color;
            &.left-border {
              border-radius: 2px 0px 0px 2px;
            }
            &.right-border {
              border-radius: 0px 2px 2px 0px;
            }
            width: 26px;
            height: 20px;
            padding: 2px;
            margin-left: .5px;
            margin-bottom: 2px;
            transition: all 0.3s;
            &:hover {
              background: @active-background-color;
            }
          }
          /* ---------------------------------- 更多操作 ---------------------------------- */
          .more-action {
            display: inline-block;
          }
        }
      }

      /* -------------------------------- 父级组件列表 id ------------------------------- */
      .parent-badge-container {
        position: absolute;
        bottom: 23px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & .badge-button {
          margin-top: 1px;
        }

        &.is-bottom {
          bottom: auto;
          top: 24px;
        }
      }
    }
  }
})

.yee-block-wrapper {
  width: 100%;
}

body > canvas.yeepay-drag-handle {
  position: fixed;
  top: -999px;
  left: -999px;
}