@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:hover {
            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,
    .#{$prefix}treelist-item-tool,
    .#{$prefix}treelist-item-expander {
        line-height: $item-line-height;

        @if $enable-big {
            .x-big & {
                line-height: $item-line-height-big;
            }
        }
        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:hover: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:hover:before {
            background-color: $row-indicator-over-color;
        }

        .#{$prefix}treelist-item-selected > .#{$prefix}treelist-row:hover: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:hover {
            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:hover > * {
            > .#{$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:hover {
        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;
        background-position-x: $item-icon-width;
        @if $enable-big {
            .x-big & {
                background-position-x: $item-icon-width-big;
            }
        }

        @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;
    background-position-x: $treelist-item-icon-width;
    @if $enable-big {
        .x-big & {
            background-position-x: $treelist-item-icon-width-big;
        }
    }
    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
);
