mv-box-highlight-create {
  .box-highlight {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10;
    opacity: 0.5;
  }

  // for keyboard users
  .drawing-cursor {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    z-index: 15;
    pointer-events: none;
    position: relative;
    background-color: #ffdd00;
    border-radius: 50%;
    border: 1px solid #ffdd00;

    // vertical line
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 100%;
      background-color: #0b0c0c;
      transform: translateX(-0.5px);
    }

    // horizontal line
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #0b0c0c;
      transform: translateY(-0.5px);
    }
  }
}