/**
 * @class Ext.panel.Resizer
 */

/**
 * @var {number}
 * Panel resizer handle size.
 */
$panelresizer-handle-size: dynamic(10px);

/**
 * @var {number}
 * Panel resizer handle size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$panelresizer-handle-size-big: dynamic(15px);

/**
 * @var {color}
 * Panel resizer handle background color.
 */
$panelresizer-handle-background-color: dynamic(transparent);

/**
 * @var {color}
 * Panel resizer handle proxy background color.
 */
$panelresizer-handle-proxy-background-color: dynamic(null);

/**
 * @var {number}
 * Panel resizer handle proxy opacity.
 */
$panelresizer-handle-proxy-opacity: dynamic(null);

/**
 * @var {number/list}
 * Panel resizer handle proxy border width.
 */
$panelresizer-handle-proxy-border-width: dynamic(1px);

/**
 * @var {string}
 * Panel resizer handle proxy border style.
 */
$panelresizer-handle-proxy-border-style: dynamic(dashed);

/**
 * @var {color}
 * Panel resizer handle proxy border color.
 */
$panelresizer-handle-proxy-border-color: dynamic(darken($panel-header-background-color, 15%));

/**
 * @var {number}
 * Panel resizer splitter size.
 */
$panelresizer-splitter-size: dynamic(10px);

/**
 * @var {number}
 * Panel resizer splitter size in the {@link Global_CSS#$enable-big big} sizing scheme.
 */
$panelresizer-splitter-size-big: dynamic(15px);

/**
 * @var {color}
 * Panel resizer splitter background color.
 */
$panelresizer-splitter-background-color: dynamic($neutral-color);

/**
 * @var {number/list}
 * Panel resizer splitter border width.
 */
$panelresizer-splitter-border-width: dynamic(null);

/**
 * @var {string}
 * Panel resizer splitter border style.
 */
$panelresizer-splitter-border-style: dynamic(null);

/**
 * @var {color}
 * Panel resizer splitter border color.
 */
$panelresizer-splitter-border-color: dynamic(null);

/**
 * @var {color}
 * Panel resizer splitter proxy background color.
 */
$panelresizer-splitter-proxy-background-color: dynamic($neutral-dark-color);

/**
 * @var {color}
 * Panel resizer splitter proxy opacity.
 */
$panelresizer-splitter-proxy-opacity: dynamic(null);

/**
 * @var {number/list}
 * Panel resizer splitter proxy border width.
 */
$panelresizer-splitter-proxy-border-width: dynamic($panelresizer-splitter-border-width);

/**
 * @var {string}
 * Panel resizer splitter proxy border style.
 */
$panelresizer-splitter-proxy-border-style: dynamic($panelresizer-splitter-border-style);

/**
 * @var {color}
 * Panel resizer splitter proxy border color.
 */
$panelresizer-splitter-proxy-border-color: dynamic($panelresizer-splitter-border-color);

/**
 * Creates a visual theme for a Panel Resizer
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {string} [$xtype=panelresizer] (protected) The base UI class to be used.
 *
 * @param {number} $handle-size
 * Panel resizer handle size.
 *
 * @param {number} $handle-size-big
 * Panel resizer handle size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $handle-background-color
 * Panel resizer handle background color.
 *
 * @param {color} $handle-proxy-background-color
 * Panel resizer handle proxy background color.
 *
 * @param {number} $handle-proxy-opacity
 * Panel resizer handle proxy opacity.
 *
 * @param {number/list} $handle-proxy-border-width
 * Panel resizer handle proxy border width.
 *
 * @param {string} $handle-proxy-border-style
 * Panel resizer handle proxy border style.
 *
 * @param {color} $handle-proxy-border-color
 * Panel resizer handle proxy border color.
 *
 * @param {number} $splitter-size
 * Panel resizer splitter size.
 *
 * @param {number} $splitter-size-big
 * Panel resizer splitter size in the {@link Global_CSS#$enable-big big} sizing scheme.
 *
 * @param {color} $splitter-background-color
 * Panel resizer splitter background color.
 *
 * @param {number/list} $splitter-border-width
 * Panel resizer splitter border width.
 *
 * @param {string} $splitter-border-style
 * Panel resizer splitter border style.
 *
 * @param {color} $splitter-border-color
 * Panel resizer splitter border color.
 *
 * @param {color} $splitter-proxy-background-color
 * Panel resizer splitter proxy background color.
 *
 * @param {number} $splitter-proxy-opacity
 * Panel resizer splitter proxy opacity.
 *
 * @param {number/list} $splitter-proxy-border-width
 * Panel resizer splitter proxy border width.
 *
 * @param {string} $splitter-proxy-border-style
 * Panel resizer splitter proxy border style.
 *
 * @param {color} $splitter-proxy-border-color
 * Panel resizer splitter proxy border color.
 */
@mixin panelresizer-ui(
    $ui: null,
    $xtype: panelresizer,

    $handle-size: null,
    $handle-size-big: null,
    $handle-background-color: null,

    $handle-proxy-background-color: null,
    $handle-proxy-opacity: null,
    $handle-proxy-border-width: null,
    $handle-proxy-border-style: null,
    $handle-proxy-border-color: null,

    $splitter-size: null,
    $splitter-size-big: null,
    $splitter-background-color: null,
    $splitter-border-width: null,
    $splitter-border-style: null,
    $splitter-border-color: null,

    $splitter-proxy-background-color: null,
    $splitter-proxy-opacity: null,
    $splitter-proxy-border-width: null,
    $splitter-proxy-border-style: null,
    $splitter-proxy-border-color: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {

        &.#{$prefix}north,
        &.#{$prefix}northeast,
        &.#{$prefix}southeast,
        &.#{$prefix}south,
        &.#{$prefix}southwest,
        &.#{$prefix}northwest {

            &.#{$prefix}handle {
                height: $handle-size;

                @if $enable-big {
                    .#{$prefix}big & {
                        height: $handle-size-big;
                    }
                }
            }

            &.#{$prefix}splitter {
                height: $splitter-size;

                @if $enable-big {
                    .#{$prefix}big & {
                        height: $splitter-size-big;
                    }
                }
            }
        }

        &.#{$prefix}northeast,
        &.#{$prefix}east,
        &.#{$prefix}southeast,
        &.#{$prefix}southwest,
        &.#{$prefix}west,
        &.#{$prefix}northwest {

            &.#{$prefix}handle {
                width: $handle-size;

                @if $enable-big {
                    .#{$prefix}big & {
                        width: $handle-size-big;
                    }
                }
            }

            &.#{$prefix}splitter {
                width: $splitter-size;

                @if $enable-big {
                    .#{$prefix}big & {
                        width: $splitter-size-big;
                    }
                }
            }
        }

        &.#{$prefix}handle {
            background-color: $handle-background-color;
        }

        &.#{$prefix}splitter {
            background-color: $splitter-background-color;
            @include border($splitter-border-width, $splitter-border-style, $splitter-border-color);
        }
    }

    .#{$prefix}#{$xtype}#{$ui-suffix}-proxy {
        &.#{$prefix}handle {
            @include border($handle-proxy-border-width, $handle-proxy-border-style, $handle-proxy-border-color);
            background-color: $handle-proxy-background-color;
            opacity: $handle-proxy-opacity;
        }

        &.#{$prefix}splitter {
            @include border($splitter-proxy-border-width, $splitter-proxy-border-style, $splitter-proxy-border-color);
            background-color: $splitter-proxy-background-color;
            opacity: $splitter-proxy-opacity;

            &.#{$prefix}horizontal {
                width: $splitter-size;
            }

            &.#{$prefix}vertical {
                height: $splitter-size;
            }
        }
    }

    .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-north {
        padding-top: $splitter-size;
        @if $enable-big {
            .#{$prefix}big & {
                padding-top: $splitter-size-big;
            }
        }
    }

    .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-east {
        padding-right: $splitter-size;
        @if $enable-big {
            .#{$prefix}big & {
                padding-right: $splitter-size-big;
            }
        }
    }

    .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-south {
        padding-bottom: $splitter-size;
        @if $enable-big {
            .#{$prefix}big & {
                padding-bottom: $splitter-size-big;
            }
        }
    }

    .#{$prefix}panel#{$ui-suffix}.#{$prefix}split-west {
        padding-left: $splitter-size;
        @if $enable-big {
            .#{$prefix}big & {
                padding-left: $splitter-size-big;
            }
        }
    }
}