/**
 * @class Ext.list.TreeItem
 */
 
@function add-if ($value1, $value2) {
    @if $value1 == null or $value2 == null {
        @return null;
    }
 
    @return $value1 + $value2;
}
 
/**
 * This private mixin handle styling all elements inside the x-treelist root element.
 * The public treelist-ui mixin calls this inside a proper selector for the ui while
 * the default styling (handled below) call this mixin at global scope (to produce a
 * set of single-class selectors).
 *
 * The outer container is a DOM structure like this:
 *
 *      +-div--------------------------+  x-treelist
 *      | +-ul-----------------------+ |     x-treelist-root-container
 *      | |                          | |
 *      | +--------------------------+ |
 *      +------------------------------+
 *
 * Each item looks like this:
 *
 *      +-li-----------------------------------+  x-treelist-item
 *      | +-div------------------------------+ |    x-treelist-row
 *      | | +-div--------------------------+ | |      x-treelist-item-wrap
 *      | | | +-div-+ +-div------+ +-div-+ | | |        x-treelist-item-icon, text, expander
 *      | | | | </> | | Text     | |  >  | | | |
 *      | | | +-----+ +----------+ +-----+ | | |
 *      | | +------------------------------+ | |
 *      | +----------------------------------+ |
 *      | +-ul-------------------------------+ |    x-treelist-container
 *      | |                                  | |
 *      | +----------------------------------+ |
 *      +--------------------------------------+
 *
 * @private
 */
@mixin treelist-ui-body (
    $padding-left,
    $padding-right,
 
    $toolstrip-background-color: null,
 
    $tool-float-indicator-color: null,
    $tool-float-indicator-width: null,
 
    $tool-selected-color: null,
    $tool-selected-background-color: null,
 
    $tool-indicator-selected-color: null,
    $tool-indicator-selected-width: null,
 
    $item-expanded-background-color: null,
    $item-expanded-child-background-color: null,
 
    $item-line-height : null,
    $item-line-height-big: null,
 
    $item-selected-background-color: null,
 
    $item-icon-color: null,
    $item-icon-over-color: null,
    $item-icon-font-size: null,
    $item-icon-font-size-big: null,
    $item-icon-width: null,
    $item-icon-width-big: null,
 
    $item-expander-color: null,
    $item-expander-over-color: null,
    $item-expander-font-size: null,
    $item-expander-font-size-big: null,
    $item-expander-width: null,
    $item-expander-width-big: null,
 
    $item-expander-glyph: null,
    $item-expander-expanded-glyph: null,
 
    $item-text-color: null,
    $item-text-icon-gap: null,
    $item-text-over-color: null,
    $item-text-font-size: null,
    $item-text-overflow: null,
 
    $row-indicator-selected-color: null,
    $row-indicator-selected-over-color: null, 
    $row-indicator-over-color: null,
    $row-indicator-width: null,
    $row-selected-background-color: null,
    $row-selected-over-background-color: null,
    $row-over-background-color: null
) {
    .#{$prefix}treelist-toolstrip {
        background-color: $toolstrip-background-color;
    }
 
    .#{$prefix}treelist-item-selected {
        &.#{$prefix}treelist-item {
            background-color: $item-selected-background-color;
        }
 
        &.#{$prefix}treelist-item-tool {
            color: $tool-selected-color;
            background-color: $tool-selected-background-color;
 
            @if $tool-indicator-selected-width != null {
                &:after {
                    height: $item-line-height;
                    @if $enable-big {
                        .x-big & {
                            height: $item-line-height-big;
                        }
                    }
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: " ";
                    width: $tool-indicator-selected-width;
                    background-color: $tool-indicator-selected-color;
                }
            }
        }
 
        > .#{$prefix}treelist-row {
            background-color: $row-selected-background-color;
        }
 
        > .#{$prefix}treelist-row-over {
            background-color: $row-selected-over-background-color;
        }
    }
 
    .#{$prefix}treelist-item-tool {
        padding-left: $padding-left;
        padding-right: $padding-right;
    }
 
    @if $tool-float-indicator-color != null and $tool-float-indicator-width != null {
        // Use after here because we use :before for the icon 
        .#{$prefix}treelist-item-tool-floated:after {
            height: $item-line-height;
            @if $enable-big {
                .x-big & {
                    height: $item-line-height-big;
                }
            }
            position: absolute;
            top: 0;
            left: 0;
            content: " ";
            width: $tool-float-indicator-width;
            background-color: $tool-float-indicator-color;
        }
    }
 
    .#{$prefix}treelist-item-icon:before,
    .#{$prefix}treelist-item-tool:before, // only size the glyph pseudo-el on a tool 
    .#{$prefix}treelist-item-expander {
        line-height: $item-line-height;
 
        @if $enable-big {
            .x-big & {
                line-height: $item-line-height-big;
            }
        }
    }
 
    .#{$prefix}treelist-item-icon,
    .#{$prefix}treelist-item-tool,
    .#{$prefix}treelist-item-expander {
        text-align: center;
    }
 
    .#{$prefix}treelist-item-icon,
    .#{$prefix}treelist-item-tool {
        color: $item-icon-color;
        font-size: $item-icon-font-size;
        width: $item-icon-width;
        @if $enable-big {
            .x-big & {
                font-size: $item-icon-font-size-big;
                width: $item-icon-width-big;
            }
        }
    }
 
    .#{$prefix}treelist-item-tool {
        width: add-if($padding-left, add-if($padding-right, $item-icon-width));
 
        @if $enable-big {
            .x-big & {
                width: add-if($padding-left, add-if($padding-right, $item-icon-width-big));
            }
        }
    }
 
    .#{$prefix}treelist-item-expander {
        color: $item-expander-color;
        font-size: $item-expander-font-size;
        @if $enable-big {
            .x-big & {
                font-size: $item-expander-font-size-big;
            }
        }
        width: $item-expander-width;
        @if $enable-big {
            .x-big & {
                width: $item-expander-width-big;
            }
        }
    }
 
    .#{$prefix}treelist-item-expander:after {
        @include font-icon($item-expander-glyph, $pseudo: false);
    }
 
    .#{$prefix}treelist-item-expanded > * > * > .#{$prefix}treelist-item-expander:after {
        @include font-icon($item-expander-expanded-glyph, $pseudo: false);
    }
 
    $text-indent: $item-text-icon-gap;
    @if $text-indent == null {
        $text-indent: $treelist-item-text-icon-gap;
    }
 
    .#{$prefix}treelist-item-text {
        color: $item-text-color;
        margin-left: add-if($item-icon-width, $text-indent);;
        margin-right: $item-expander-width;
        font-size: $item-text-font-size;
        line-height: $item-line-height;
        @if $enable-big {
            .x-big & {
                margin-left: add-if($item-icon-width-big, $text-indent);;
                line-height: $item-line-height-big;
                margin-right: $item-expander-width-big;
            }
        }
        text-overflow: $item-text-overflow;
    }
 
    .#{$prefix}treelist-row {
        padding-left: $padding-left;
        padding-right: $padding-right;
    }
 
    @if $row-indicator-width != null {
        .#{$prefix}treelist-row-over:before,
        .#{$prefix}treelist-item-selected > .#{$prefix}treelist-row:before {
            content: " ";
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            width: $row-indicator-width;
            height: 100%;
        }
 
        .#{$prefix}treelist-row-over:before {
            background-color: $row-indicator-over-color;
        }
 
        .#{$prefix}treelist-item-selected > .#{$prefix}treelist-row-over:before {
            background-color: $row-indicator-selected-over-color;
        }
 
        .#{$prefix}treelist-item-selected > .#{$prefix}treelist-row:before {
            background-color: $row-indicator-selected-color;
        }
    }
 
    .#{$prefix}treelist-item-floated {
        .#{$prefix}treelist-container {
            width: auto;
        }
        > .#{$prefix}treelist-row {
            background-color: $toolstrip-background-color;
        }
 
        > .#{$prefix}treelist-container {
            margin-left: -$item-icon-width;
            @if $enable-big {
                .x-big & {
                    margin-left: -$item-icon-width-big;
                }
            }
        }
 
        > * > * > .#{$prefix}treelist-item-text {
            margin-left: 0;
        }
 
        > * .#{$prefix}treelist-row {
            padding-left: 0;
        }
 
        .#{$prefix}treelist-row:before {
            width: 0;
        }
 
        > .#{$prefix}treelist-row-over {
            background-color: $toolstrip-background-color;
 
            > * > .#{$prefix}treelist-item-text {
                color: $item-text-color;
            }
        }
    }
 
    .#{$prefix}treelist-item-expanded {
        background-color: $item-expanded-background-color;
 
        & .#{$prefix}treelist-item {
            background-color: $item-expanded-child-background-color;
        }
 
        & > .#{$prefix}treelist-item-expander:after {
            @include font-icon($item-expander-expanded-glyph, $pseudo: false);
        }
    }
 
    .#{$prefix}treelist-item-collapsed > * > .#{$prefix}treelist-item-expander:after {
        @include font-icon($item-expander-glyph, $pseudo: false);
    }
 
    &.#{$prefix}treelist-highlight-path {
        .#{$prefix}treelist-item-over > * {
            > .#{$prefix}treelist-item-icon {
                color: $item-icon-over-color;
                transition: color 0.5s;
            }
            > .#{$prefix}treelist-item-text {
                color: $item-text-over-color;
                transition: color 0.5s;
            }
            > .#{$prefix}treelist-item-expander {
                color: $item-expander-over-color;
                transition: color 0.5s;
            }
        }
    }
 
    .#{$prefix}treelist-row-over {
        background-color: $row-over-background-color;
 
        > * > .#{$prefix}treelist-item-icon {
            color: $item-icon-over-color;
            transition: color 0.5s;
        }
        > * > .#{$prefix}treelist-item-text {
            color: $item-text-over-color;
            transition: color 0.5s;
        }
        > * > .#{$prefix}treelist-item-expander {
            color: $item-expander-over-color;
            transition: color 0.5s;
        }
    }
 
    .#{$prefix}treelist-expander-first {
        .#{$prefix}treelist-item-icon {
            left: $item-expander-width;
            @if $enable-big {
                .x-big & {
                    left: $item-expander-width-big;
                }
            }
        }
 
        .#{$prefix}treelist-item-text {
            margin-left: add-if($item-expander-width, add-if($item-icon-width, $text-indent));
            @if $enable-big {
                .x-big & {
                    margin-left: add-if($item-expander-width-big, add-if($item-icon-width-big, $text-indent));
                }
            }
            margin-right: 0;
        }
 
        .#{$prefix}treelist-item-hide-icon > * > * > .#{$prefix}treelist-item-text {
            margin-left: add-if($item-expander-width, $text-indent);
            @if $enable-big {
                .x-big & {
                    margin-left: add-if($item-expander-width-big, $text-indent);
                }
            }
        }
    }
 
    .#{$prefix}treelist-item-hide-icon > * > * > .#{$prefix}treelist-item-text {
        margin-left: $text-indent;
    }
}
 
//------------------------------------------------------------------------------------ 
 
/**
 * This mixin generates styles for `{@link Ext.list.Tree treelist}` widgets.
 */
@mixin treelist-ui (
    $ui,
 
    $background-color: null,
    $padding: null,
 
    $toolstrip-background-color: null,
 
    $tool-float-indicator-color: null,
    $tool-float-indicator-width: null,
 
    $tool-selected-color: null,
    $tool-selected-background-color: null,
 
    $tool-indicator-selected-color: null,
    $tool-indicator-selected-width: null,
 
    $item-expanded-background-color: null,
    $item-expanded-child-background-color: null,
 
    $item-line-height : null,
    $item-line-height-big : null,
 
    $item-selected-background-color: null,
 
    $item-icon-color: null,
    $item-icon-over-color: null,
    $item-icon-font-size: null,
    $item-icon-font-size-big: null,
    $item-icon-width: null,
    $item-icon-width-big: null,
 
    $item-expander-color: null,
    $item-expander-over-color: null,
    $item-expander-font-size: null,
    $item-expander-font-size-big: null,
    $item-expander-width: null,
    $item-expander-width-big: null,
 
    $item-expander-glyph: null,
    $item-expander-expanded-glyph: null,
 
    $item-text-color: null,
    $item-text-icon-gap: null,
    $item-text-over-color: null,
    $item-text-font-size: null,
    $item-text-overflow: null,
 
    $row-indicator-selected-color: null,
    $row-indicator-selected-over-color: null, 
    $row-indicator-over-color: null,
    $row-indicator-width: null,
    $row-selected-background-color: null,
    $row-selected-over-background-color: null,
    $row-over-background-color: null
) {
    // Sass will remove any styles (margin or padding) that have null values. Further, 
    // it will remove empty rulesets... so we don't need to conditionalize these rules 
    // and it will reduce down to potentially nothing as appropriate. 
    // 
    .#{$prefix}treelist-#{$ui} {
        background-color: $background-color;
        // Some browsers (FF, IE) don't support reading background-position-x 
        background-position: $item-icon-width 0%;
        @if $enable-big {
            .x-big & {
                background-position: $item-icon-width-big 0%;
            }
        }
 
        @if $padding != null {
            padding: top($padding) 0 bottom($padding) 0;
        }
 
        @include treelist-ui-body( 
            $padding-left: if($padding == null, null, left($padding)), 
            $padding-right: if($padding == null, null, right($padding)), 
 
            $toolstrip-background-color: $toolstrip-background-color, 
 
            $tool-float-indicator-color: $tool-float-indicator-color, 
            $tool-float-indicator-width: $tool-float-indicator-width, 
 
            $tool-selected-color: $tool-selected-color, 
            $tool-selected-background-color: $tool-selected-background-color, 
 
            $tool-indicator-selected-color: $tool-indicator-selected-color, 
            $tool-indicator-selected-width: $tool-indicator-selected-width, 
 
            $item-expanded-background-color: $item-expanded-background-color, 
            $item-expanded-child-background-color: $item-expanded-child-background-color, 
 
            $item-line-height : $item-line-height, 
            $item-line-height-big: $item-line-height-big, 
 
            $item-selected-background-color: $item-selected-background-color, 
 
            $item-icon-color: $item-icon-color, 
            $item-icon-over-color: $item-icon-over-color, 
            $item-icon-font-size: $item-icon-font-size, 
            $item-icon-font-size-big: $item-icon-font-size-big, 
            $item-icon-width: $item-icon-width, 
            $item-icon-width-big: $item-icon-width-big, 
 
            $item-expander-color: $item-expander-color, 
            $item-expander-over-color: $item-expander-over-color, 
            $item-expander-font-size: $item-expander-font-size, 
            $item-expander-font-size-big: $item-expander-font-size-big, 
            $item-expander-width: $item-expander-width, 
            $item-expander-width-big: $item-expander-width-big, 
 
            $item-expander-glyph: $item-expander-glyph, 
            $item-expander-expanded-glyph: $item-expander-expanded-glyph, 
 
            $item-text-color: $item-text-color, 
            $item-text-icon-gap: $item-text-icon-gap, 
            $item-text-over-color: $item-text-over-color, 
            $item-text-font-size: $item-text-font-size, 
            $item-text-overflow: $item-text-overflow, 
 
            $row-indicator-selected-color: $row-indicator-selected-color, 
            $row-indicator-selected-over-color: $row-indicator-selected-over-color,  
            $row-indicator-over-color: $row-indicator-over-color, 
            $row-indicator-width: $row-indicator-width, 
            $row-selected-background-color: $row-selected-background-color, 
            $row-selected-over-background-color: $row-selected-over-background-color, 
            $row-over-background-color: $row-over-background-color 
        );
    }
}
 
//------------------------------------------------------------------------------------ 
// Since the treelist-ui-body mixin can only style the child elements of the treelist, 
// we have to style x-treelist here. Further, styles that are ui-independent are also 
// placed here. 
// 
.#{$prefix}treelist {
    background-color: $treelist-background-color;
    // Some browsers (FF, IE) don't support reading background-position-x 
    background-position: $treelist-item-icon-width 0%;
    @if $enable-big {
        .x-big & {
            background-position: $treelist-item-icon-width-big 0%;
        }
    }
    overflow: hidden;
    padding: top($treelist-padding) 0 bottom($treelist-padding) 0;
}
 
.#{$prefix}treelist-container,
.#{$prefix}treelist-root-container {
    width: 100%;
}
 
.#{$prefix}treelist-toolstrip {
    display: none;
}
 
.#{$prefix}treelist-micro {
    > .#{$prefix}treelist-toolstrip {
        display: inline-block;
    }
    > .#{$prefix}treelist-root-container {
        display: none;
    }
}
 
.#{$prefix}treelist-item,
.#{$prefix}treelist-container,
.#{$prefix}treelist-root-container {
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.#{$prefix}treelist-item-tool,
.#{$prefix}treelist-row,
.#{$prefix}treelist-item-wrap {
    position: relative;
}
 
.#{$prefix}treelist-item-icon,
.#{$prefix}treelist-item-expander {
    display: none;
    position: absolute;
    top: 0;
}
 
.#{$prefix}treelist-item-expander {
    right: 0;
    cursor: pointer;
}
 
.#{$prefix}treelist-expander-only .#{$prefix}treelist-item-expandable > * > .#{$prefix}treelist-item-wrap > * {
    cursor: pointer;
}
 
.#{$prefix}treelist-item-text {
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
}
 
.#{$prefix}treelist-item-collapsed > .#{$prefix}treelist-container {
    display: none;
}
 
.#{$prefix}treelist-item-expandable > * > * > .#{$prefix}treelist-item-expander,
.#{$prefix}treelist-item-icon {
    display: block;
}
 
.#{$prefix}treelist-item-floated > * > * > .#{$prefix}treelist-item-expander,
.#{$prefix}treelist-item-floated > * > * > .#{$prefix}treelist-item-icon {
    display: none;
}
 
.#{$prefix}treelist-expander-first .#{$prefix}treelist-item-expander {
    left: 0;
    right: auto;
}
 
@include treelist-ui-body( 
    $padding-left: left($treelist-padding), 
    $padding-right: right($treelist-padding), 
 
    $toolstrip-background-color: $treelist-toolstrip-background-color, 
 
    $tool-float-indicator-color: $treelist-tool-float-indicator-color, 
    $tool-float-indicator-width: $treelist-tool-float-indicator-width, 
 
    $tool-selected-color: $treelist-tool-selected-color, 
    $tool-selected-background-color: $treelist-tool-selected-background-color, 
 
    $tool-indicator-selected-color: $treelist-tool-indicator-selected-color, 
    $tool-indicator-selected-width: $treelist-tool-indicator-selected-width, 
 
    $item-expanded-background-color: $treelist-item-expanded-background-color, 
    $item-expanded-child-background-color: $treelist-item-expanded-child-background-color, 
 
    $item-line-height : $treelist-item-line-height, 
    $item-line-height-big: $treelist-item-line-height-big, 
 
    $item-icon-color: $treelist-item-icon-color, 
    $item-icon-over-color: $treelist-item-icon-over-color, 
    $item-icon-font-size: $treelist-item-icon-font-size, 
    $item-icon-font-size-big: $treelist-item-icon-font-size-big, 
    $item-icon-width: $treelist-item-icon-width, 
    $item-icon-width-big: $treelist-item-icon-width-big, 
 
    $item-expander-color: $treelist-item-expander-color, 
    $item-expander-over-color: $treelist-item-expander-over-color, 
    $item-expander-font-size: $treelist-item-expander-font-size, 
    $item-expander-font-size-big: $treelist-item-expander-font-size-big, 
    $item-expander-width: $treelist-item-expander-width, 
    $item-expander-width-big: $treelist-item-expander-width-big, 
 
    $item-expander-glyph: $treelist-item-expander-glyph, 
    $item-expander-expanded-glyph: $treelist-item-expander-expanded-glyph, 
 
    $item-text-color: $treelist-item-text-color, 
    $item-text-icon-gap: $treelist-item-text-icon-gap, 
    $item-text-over-color: $treelist-item-text-over-color, 
    $item-text-font-size: $treelist-item-text-font-size, 
    $item-text-overflow: $treelist-item-text-overflow, 
 
    $row-indicator-selected-color: $treelist-row-indicator-selected-color, 
    $row-indicator-selected-over-color: $treelist-row-indicator-selected-over-color,  
    $row-indicator-over-color: $treelist-row-indicator-over-color, 
    $row-indicator-width: $treelist-row-indicator-width, 
    $row-selected-background-color: $treelist-row-selected-background-color, 
    $row-selected-over-background-color: $treelist-row-selected-over-background-color, 
    $row-over-background-color: $treelist-row-over-background-color 
);