@mixin gradient($color1, $color2) {
    background: $color1;
    background: -webkit-linear-gradient(top, $color1 0%, $color2 100%);
    background: linear-gradient(to bottom, $color1 0%, $color2 100%);
}

@mixin jstree-theme($base-height, $image, $image-height) {
    $correction: ($image-height - $base-height) / 2;

    .jstree-node {
        min-height: $base-height;
        line-height: $base-height;
        margin-left: $base-height;
        min-width: $base-height;
    }
    .jstree-anchor {
        line-height: $base-height;
        height: $base-height;
    }
    .jstree-icon {
        width: $base-height;
        height: $base-height;
        line-height: $base-height;
    }
    .jstree-icon:empty {
        width: $base-height;
        height: $base-height;
        line-height: $base-height;
    }
    &.jstree-rtl .jstree-node {
        margin-right: $base-height;
    }
    .jstree-wholerow {
        height: $base-height;
    }

    .jstree-node,
    .jstree-icon {
        background-image: url("#{$image}");
    }
    .jstree-node {
        background-position: -($image-height * 9 + $correction) -$correction;
        background-repeat: repeat-y;
    }
    .jstree-last {
        background: transparent;
    }

    .jstree-open > .jstree-ocl {
        background-position: -($image-height * 4 + $correction) -$correction;
        background-position-y: -4px;
    }
    .jstree-closed > .jstree-ocl {
        background-position: -($image-height * 3 + $correction) -$correction;
        background-position-y: -4px;
    }
    .jstree-leaf > .jstree-ocl {
        background-position: -($image-height * 2 + $correction) -$correction;
        background-position-y: -4px;
    }

    .jstree-themeicon {
        background-position: -($image-height * 8 + $correction) -$correction;
    }

    > .jstree-no-dots {
        .jstree-node,
        .jstree-leaf > .jstree-ocl {
            background: transparent;
        }
        .jstree-open > .jstree-ocl {
            background-position: -($image-height * 1 + $correction) -$correction;
        }
        .jstree-closed > .jstree-ocl {
            background-position: -$correction -$correction;
        }
    }

    .jstree-disabled {
        background: transparent;
        &.jstree-hovered {
            background: transparent;
        }
        &.jstree-clicked {
            background: #efefef;
        }
    }

    @if $plugin-checkbox {
        .jstree-checkbox {
            background-position: -($image-height * 5 + $correction) -$correction;
            &:hover {
                background-position: -($image-height * 5 + $correction) -($image-height * 1 + $correction);
            }
        }

        &.jstree-checkbox-selection .jstree-clicked, .jstree-checked {
            > .jstree-checkbox {
                background-position: -($image-height * 7 + $correction) -$correction;
                &:hover {
                    background-position: -($image-height * 7 + $correction) -($image-height * 1 + $correction);
                }
            }
        }

        .jstree-checkbox-disabled {
            opacity: 0.8;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'jstree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#jstree-grayscale"); /* Firefox 10+ */
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
        }
    }

    .jstree-anchor {
        > .jstree-undetermined {
            background-position: -($image-height * 6 + $correction) -$correction;
            &:hover {
                background-position: -($image-height * 6 + $correction) -($image-height * 1 + $correction);
            }
        }
    }
    > .jstree-striped {
        background-size: auto ($base-height * 2);
    }

    &.jstree-rtl {
        .jstree-node {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
            background-position: 100% 1px;
            background-repeat: repeat-y;
        }
        .jstree-last {
            background: transparent;
        }
        .jstree-open > .jstree-ocl {
            background-position: -($image-height * 4 + $correction) -($image-height * 1 + $correction);
        }
        .jstree-closed > .jstree-ocl {
            background-position: -($image-height * 3 + $correction) -($image-height * 1 + $correction);
        }
        .jstree-leaf > .jstree-ocl {
            background-position: -($image-height * 2 + $correction) -($image-height * 1 + $correction);
        }
        > .jstree-no-dots {
            .jstree-node,
            .jstree-leaf > .jstree-ocl {
                background: transparent;
            }
            .jstree-open > .jstree-ocl {
                background-position: -($image-height * 1 + $correction) -($image-height * 1 + $correction);
            }
            .jstree-closed > .jstree-ocl {
                background-position: -$correction -($image-height * 1 + $correction);
            }
        }
    }
    .jstree-themeicon-custom {
        background-color: transparent;
        background-image: none;
        background-position: 0 0;
    }

    > .jstree-container-ul .jstree-loading > .jstree-ocl {
        background: url("#{$image-path}throbber.gif") center center no-repeat;
    }

    .jstree-file {
        background: url("#{$image}") -($image-height * 3 + $correction) -($image-height * 2 + $correction) no-repeat;
    }
    .jstree-folder {
        background: url("#{$image}") -($image-height * 8 + $correction) -($correction) no-repeat;
    }

    > .jstree-container-ul > .jstree-node {
        margin-left: 0;
        margin-right: 0;
    }
    @if $plugin-dnd {
        // drag'n'drop
        #jstree-dnd {
            line-height: $base-height;
            padding: 0 4px;
            .jstree-ok,
            .jstree-er {
                background-image: url("#{$image-path}32px.png");
                background-repeat: no-repeat;
                background-color: transparent;
            }
            i {
                background: transparent;
                width: $base-height;
                height: $base-height;
                line-height: $base-height;
            }
            .jstree-ok {
                background-position: -($correction) -($image-height * 2 + $correction);
            }
            .jstree-er {
                background-position: -($image-height * 1 + $correction) -($image-height * 2 + $correction);
            }
        }
    }
}

@mixin jstree-responsive() {
    @media (max-width: 768px) {
        // background image
        .jstree-icon {
            background-image: url("#{$image-path}#{$base-height}.png");
        }

        .jstree-node,
        .jstree-leaf > .jstree-ocl {
            background: transparent;
        }

        .jstree-node {
            min-height: $base-height;
            line-height: $base-height;
            margin-left: $base-height;
            min-width: $base-height;
            white-space: nowrap;
        }
        .jstree-anchor {
            line-height: $base-height;
            height: $base-height;
        }
        .jstree-icon, .jstree-icon:empty {
            width: $base-height;
            height: $base-height;
            line-height: $base-height;
        }

        > .jstree-container-ul > .jstree-node {
            margin-left: 0;
        }
        &.jstree-rtl .jstree-node {
            margin-left: 0;
            margin-right: $base-height;
        }
        &.jstree-rtl .jstree-container-ul > .jstree-node {
            margin-right: 0;
        }

        .jstree-ocl,
        .jstree-themeicon,
        .jstree-checkbox {
            background-size: ($base-height * 3) ($base-height * 6);
        }
        .jstree-leaf > .jstree-ocl {
            background: transparent;
        }
        .jstree-open > .jstree-ocl {
            background-position: 0 0px !important;
        }
        .jstree-closed > .jstree-ocl {
            background-position: 0 -($base-height * 1) !important;
        }
        &.jstree-rtl .jstree-closed > .jstree-ocl {
            background-position: -($base-height * 1) 0px !important;
        }

        .jstree-themeicon {
            background-position: -($base-height * 1) -($base-height * 1);
        }
        @if $plugin-checkbox {
            .jstree-checkbox, .jstree-checkbox:hover {
                background-position: -($base-height * 1) -($base-height * 2);
            }
            &.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
            &.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
            .jstree-checked > .jstree-checkbox,
            .jstree-checked > .jstree-checkbox:hover {
                background-position: 0 -($base-height * 2);
            }
        }
        .jstree-anchor > .jstree-undetermined, .jstree-anchor > .jstree-undetermined:hover {
            background-position: 0 -($base-height * 3);
        }

        .jstree-anchor {
            font-weight: bold;
            font-size: 1.1em;
            text-shadow: 1px 1px white;
        }

        > .jstree-striped {
            background: transparent;
        }
        @if $plugin-wholerow {
            .jstree-wholerow {
                border-top: 1px solid $mobile-wholerow-bordert;
                border-bottom: 1px solid $mobile-wholerow-borderb;
                background: $mobile-wholerow-bg-color;
                height: $base-height;
            }
            .jstree-wholerow-hovered {
                background: $hovered-bg-color;
            }
            .jstree-wholerow-clicked {
                background: $clicked-bg-color;
            }

            // thanks to PHOTONUI
            .jstree-children .jstree-last > .jstree-wholerow {
                box-shadow: inset 0 -6px 3px -5px $mobile-wholerow-shadow;
            }
            .jstree-children .jstree-open > .jstree-wholerow {
                box-shadow: inset 0 6px 3px -5px $mobile-wholerow-shadow;
                border-top: 0;
            }
        }
        .jstree-children .jstree-open + .jstree-open {
            box-shadow: none;
        }

        // experiment
        .jstree-node,
        .jstree-icon,
        .jstree-node > .jstree-ocl,
        .jstree-themeicon,
        .jstree-checkbox {
            background-image: url("#{$image-path}#{$base-height}.png");
            background-size: ($base-height * 3) ($base-height * 6);
        }

        .jstree-node {
            background-position: -($base-height * 2) 0;
            background-repeat: repeat-y;
        }
        .jstree-last {
            background: transparent;
        }
        .jstree-leaf > .jstree-ocl {
            background-position: -($base-height * 1) -($base-height * 3);
        }
        .jstree-last > .jstree-ocl {
            background-position: -($base-height * 1) -($base-height * 4);
        }
    }
}