@import "./theme.scss";

.ai-cursor-line-box {
  position: fixed;
  z-index: 100;

  pointer-events: none;

  // transform: scale(0);
  // transform: scale(0.1);
  // transform-origin: 100% 100%;

  width: 100%;
  height: 100%;

  .ai-cursor-line-right-1,
  .ai-cursor-line-right-2,
  .ai-cursor-line-bottom-1,
  .ai-cursor-line-bottom-2 {
    position: fixed;
    transform: scale(0);
    opacity: 0.5;
    transition: all 100ms linear;
  }

  .ai-cursor-line-right-1 {
    border-top: 1px dashed $themeColor4;
    transform-origin: 0 0;
    width: 100%;
    height: 0;
  }

  .ai-cursor-line-right-2 {
    border-top: 1px dashed $themeColor4;
    transform-origin: top right;
    width: 100%;
    height: 0;
  }

  .ai-cursor-line-bottom-1 {
    border-left: 1px dashed $themeColor4;
    transform-origin: 0 0;
    // background-color: pink;
    width: 0;
    height: 100%;
  }

  .ai-cursor-line-bottom-2 {
    border-left: 1px dashed $themeColor4;
    transform-origin: top right;
    width: 0;
    height: 100%;
  }

  .ai-cursor-line {
    // position: relative;
    transform: scale(0.001);
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
  }

  .ai-cursor-line1 {
    background-color: $themeColor4;
    transition: all 100ms linear;
  }

  .ai-cursor-line2 {
    background-color: $themeColor4;
    transition: all 100ms linear;
    transform-origin: bottom right;
  }

  // .ai-cursor-line1 {
  //     transform: scale(0.1);
  //     width: 100%;
  //     height: 100%;
  // }

  // background-color: red;
  &:active {
    .ai-cursor-line-right-1,
    .ai-cursor-line-right-2,
    .ai-cursor-line-bottom-1,
    .ai-cursor-line-bottom-2 {
      pointer-events: none;
      transform: scale(1);
    }

    .ai-cursor-line1 {
      transform: scale(1);
      border-top: 1px dashed $themeColor4;
      border-left: 1px dashed $themeColor4;
      opacity: 0.5;
    }

    .ai-cursor-line2 {
      transform: scale(1);
      border-top: 1px dashed $themeColor4;
      border-left: 1px dashed $themeColor4;
      opacity: 0.5;
      // transition: all 10000ms linear;
    }

    // transform: scale(1);
    // border-top: 1px dashed $themeColor4;
    // border-left: 1px dashed $themeColor4;
    // opacity: 0.5;
  }
}

// .ai-cursor-line1 {
//     width: 100%;
//     height: 2px;

//     &:active {
//         background-color: pink;
//     }
// }

// .ai-cursor-line2 {
//     height: 100%;
//     width: 2px;

//     &:active {
//         background-color: pink;
//     }
// }
