@prefix: slice-line;

.@{prefix} {
  &- {
    &root {
      position: absolute;
    }

    &handle {
      position: absolute;
      border: 1px solid #1199ff;
      background-color: #ffffff;
      color: #1199ff;
      border-radius: 50% 50% 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 12px;
      transform-origin: bottom center;
    }

    &top,
    &bottom {
      left: 0;
      width: 100%;
      height: 3px;
      cursor: ns-resize;

      .@{prefix}-handle {
        left: 50%;
      }
    }

    &top {
      transform: translateY(-3px);
      border-bottom: 1px solid #1199ff;

      .@{prefix}-handle {
        bottom: 0;
        transform: translateX(-50%);
      }
    }

    &bottom {
      border-top: 1px solid #1199ff;

      .@{prefix}-handle {
        top: 0;
        transform: translate(-50%, -100%) rotate(180deg);
      }
    }

    &left,
    &right {
      top: 0;
      width: 3px;
      height: 100%;
      cursor: ew-resize;

      .@{prefix}-handle {
        top: 50%;
      }
    }

    &left {
      transform: translateX(-3px);
      border-right: 1px solid #1199ff;

      .@{prefix}-handle {
        right: 0;
        transform: rotate(-90deg) translateY(100%);
      }
    }

    &right {
      border-left: 1px solid #1199ff;

      .@{prefix}-handle {
        left: 0;
        transform: rotate(90deg) translateY(100%);
      }
    }
  }
}