    .#{$prefix}resizable-handle {
        position: absolute;
        z-index: 100;
        font-size: 1px;
        line-height: $resizer-handle-size;
        overflow: hidden;
        zoom: 1;
        @include opacity(0);
        background-color: #fff;

        // Rounded corners if the  theme specifies them
        @if not is-null($resizer-handle-border-radius) and $resizer-handle-border-radius != 0 {
            @include border-radius($resizer-handle-border-radius);
        }
    }

    // Collapsed Components cannot be resized
    .#{$prefix}collapsed .#{$prefix}resizable-handle {
        display: none;
    }

    .#{$prefix}resizable-over {
        .#{$prefix}resizable-handle-north {
            cursor: n-resize;
        }
        .#{$prefix}resizable-handle-south {
            cursor: s-resize;
        }
        .#{$prefix}resizable-handle-east {
            cursor: e-resize;
        }
        .#{$prefix}resizable-handle-west {
            cursor: w-resize;
        }
        .#{$prefix}resizable-handle-southeast {
            cursor: se-resize;
        }
        .#{$prefix}resizable-handle-northwest {
            cursor: nw-resize;
        }
        .#{$prefix}resizable-handle-northeast {
            cursor: ne-resize;
        }
        .#{$prefix}resizable-handle-southwest {
            cursor: sw-resize;
        }
    }

    .#{$prefix}resizable-handle-east {
        width: $resizer-handle-size;
        height: 100%;
        right: 0;
        top: 0;
    }

    .#{$prefix}resizable-handle-south {
        width: 100%;
        height: $resizer-handle-size;
        left: 0;
        bottom: 0;
    }

    .#{$prefix}resizable-handle-west {
        width: $resizer-handle-size;
        height: 100%;
        left: 0;
        top: 0;
    }

    .#{$prefix}resizable-handle-north {
        width: 100%;
        height: $resizer-handle-size;
        left: 0;
        top: 0;
    }

    .#{$prefix}resizable-handle-southeast {
        width: $resizer-handle-size;
        height: $resizer-handle-size;
        right: 0;
        bottom: 0;
        z-index: 101;
    }

    .#{$prefix}resizable-handle-northwest {
        width: $resizer-handle-size;
        height: $resizer-handle-size;
        left: 0;
        top: 0;
        z-index: 101;
    }

    .#{$prefix}resizable-handle-northeast {
        width: $resizer-handle-size;
        height: $resizer-handle-size;
        right: 0;
        top: 0;
        z-index: 101;
    }

    .#{$prefix}resizable-handle-southwest {
        width: $resizer-handle-size;
        height: $resizer-handle-size;
        left: 0;
        bottom: 0;
        z-index: 101;
    }

    /*IE rounding error*/
    @if $include-ie {
        .#{$prefix}ie {
            .#{$prefix}resizable-handle-east {
                margin-right: -1px; /*IE rounding error*/
            }

            .#{$prefix}resizable-handle-south {
                margin-bottom: -1px;
            }
        }
    }

    // If the pinned config is set, then handles are visible
    .#{$prefix}resizable-pinned .#{$prefix}resizable-handle,
    .#{$prefix}resizable-over .#{$prefix}resizable-handle {
        @include opacity(1);
    }

    @if $include-ext-window-window {
        .#{$prefix}window .#{$prefix}window-handle {
            @include opacity(0);
        }

        .#{$prefix}window-collapsed .#{$prefix}window-handle {
            display: none;
        }
    }

    .#{$prefix}resizable-proxy {
        border: 1px dashed #3b5a82;
        position: absolute;
        overflow: hidden;
        z-index: 50000;
    }

    .#{$prefix}resizable-over,
    .#{$prefix}resizable-pinned {

        // themes provide position-x based upon image width
        .#{$prefix}resizable-handle-east,
        .#{$prefix}resizable-handle-west {
            background-image: theme-background-image('sizer/e-handle');
        }

        // themes provide position-y based upon image height
        .#{$prefix}resizable-handle-south,
        .#{$prefix}resizable-handle-north {
            background-image: theme-background-image('sizer/s-handle');
        }

        // themes provide position x y based upon image size
        .#{$prefix}resizable-handle-southeast {
            background-position: top left;
            background-image: theme-background-image('sizer/se-handle');
        }

        .#{$prefix}resizable-handle-northwest {
            background-position: bottom right;
            background-image: theme-background-image('sizer/nw-handle');
        }

        .#{$prefix}resizable-handle-northeast {
            background-position: bottom left;
            background-image: theme-background-image('sizer/ne-handle');
        }

        .#{$prefix}resizable-handle-southwest {
            background-position: top right;
            background-image: theme-background-image('sizer/sw-handle');
        }
    }