@use "../../styles/variables";

$resizable-prefix-cls: 'thy-resizable';
$resize-height: 10px;
$resize-line-width: 2px;
$resize-top: -5px;

.#{$resizable-prefix-cls} {
    position: relative;
    &-preview {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        border: 1px dashed variables.$gray-300;
    }
    &-handle {
        position: absolute;
        user-select: none;
        z-index: 8;
        .#{$resizable-prefix-cls}-handle-line {
            margin: auto;
            transition: background-color 300ms linear;
        }
        &:hover {
            .#{$resizable-prefix-cls}-handle-line {
                background-color: variables.$primary;
            }
        }

        &-top {
            width: 100%;
            height: $resize-height;
            top: $resize-top;
            left: 0;
            .#{$resizable-prefix-cls}-handle-line {
                height: $resize-line-width;
            }
        }
        &-right {
            width: $resize-height;
            height: 100%;
            top: 0;
            right: $resize-top;
            .#{$resizable-prefix-cls}-handle-line {
                width: $resize-line-width;
                height: 100%;
            }
        }
        &-bottom {
            width: 100%;
            height: $resize-height;
            bottom: $resize-top;
            left: 0;
            .#{$resizable-prefix-cls}-handle-line {
                height: $resize-line-width;
            }
        }
        &-left {
            width: $resize-height;
            height: 100%;
            top: 0;
            left: $resize-top;
            .#{$resizable-prefix-cls}-handle-line {
                width: $resize-line-width;
                height: 100%;
            }
        }
        &-topRight {
            width: 20px;
            height: 20px;
            top: $resize-top;
            right: $resize-top;
            z-index: 10;
        }
        &-bottomRight {
            width: 20px;
            height: 20px;
            right: $resize-top;
            bottom: $resize-top;
            z-index: 10;
        }
        &-bottomLeft {
            width: 20px;
            height: 20px;
            bottom: $resize-top;
            left: $resize-top;
            z-index: 10;
        }
        &-topLeft {
            width: 20px;
            height: 20px;
            top: $resize-top;
            left: $resize-top;
            z-index: 10;
        }
    }

    &:not(.#{$resizable-prefix-cls}-resizing) {
        .#{$resizable-prefix-cls}-handle {
            &-top,
            &-bottom {
                cursor: row-resize;
            }
            &-right,
            &-left {
                cursor: col-resize;
            }
            &-bottomRight,
            &-topLeft {
                cursor: nwse-resize;
            }
            &-bottomLeft,
            &-topRight {
                cursor: nesw-resize;
            }
        }
    }

    &-disabled {
        .#{$resizable-prefix-cls} {
            &-handle {
                pointer-events: none;
            }
        }
    }
}
