@thickness: 8px;
@half-thickness: 4px;

.g-resizable {
    position: fixed;
    z-index: 99;
    border: 1px solid #333;

    .resizer {
        position: absolute;
        z-index: 100;

        &.top {
            cursor: ns-resize;
            top: -@half-thickness;
            left: @half-thickness;
            width: calc(100% - @thickness);
            height: @thickness;
        }

        &.top-right {
            cursor: nesw-resize;
            width: 2 * @thickness;
            height: 2 * @thickness;
            top: -@thickness;
            left: calc(100% - @thickness);
        }

        &.right {
            cursor: ew-resize;
            top: @half-thickness;
            left: calc(100% - @half-thickness);
            width: @thickness;
            height: calc(100% - @thickness);
        }

        &.bottom-right {
            cursor: nwse-resize;
            width: 2 * @thickness;
            height: 2 * @thickness;
            top: calc(100% - @thickness);
            left: calc(100% - @thickness);
        }

        &.bottom {
            cursor: ns-resize;
            top: calc(100% - @half-thickness);
            left: @half-thickness;
            width: calc(100% - @thickness);
            height: @thickness;
        }

        &.bottom-left {
            cursor: nesw-resize;
            width: 2 * @thickness;
            height: 2 * @thickness;
            top: calc(100% - @thickness);
            left: -@thickness;
        }

        &.left {
            cursor: ew-resize;
            top: @half-thickness;
            left: -@half-thickness;
            width: @thickness;
            height: calc(100% - @thickness);
        }

        &.top-left {
            cursor: nwse-resize;
            width: 2 * @thickness;
            height: 2 * @thickness;
            top: -@thickness;
            left: -@thickness;
        }
    }
}