_tool.scss

@mixin extjs-tool {
    .#{$prefix}tool {
        cursor: pointer;

        img {
            overflow: hidden;

            width: $tool-size;
            height: $tool-size;

            cursor: pointer;

            background-color: transparent;
            background-repeat: no-repeat;
            // background-image: theme-background-image($theme-name, 'tools/tool-sprites.gif');

            margin: 0;
        }
    }

    .#{$prefix}panel-header-horizontal,
    .#{$prefix}window-header-horizontal {
        .#{$prefix}tool {
            margin-left: 5px;
        }
    }

    .#{$prefix}panel-header-tools-first {
        .#{$prefix}tool {
            margin-left: 0;
            margin-right: 5px;
        }
    }

    .#{$prefix}panel-header-vertical,
    .#{$prefix}window-header-vertical {
        .#{$prefix}tool {
            margin-bottom: 5px;
        }
    }

    .#{$prefix}tool-placeholder {
        visibility: hidden;
    }

    //Icons
    @include extjs-tool-icon('maximize', 0);
    @include extjs-tool-icon('minimize', 1);
    @include extjs-tool-icon('restore', 2);
    @include extjs-tool-icon('save', 3);
    @include extjs-tool-icon('refresh', 4);
    @include extjs-tool-icon('help', 5);
    @include extjs-tool-icon('info', 6);
    @include extjs-tool-icon('search', 7);
    @include extjs-tool-icon('gear', 8);
    @include extjs-tool-icon('close', 9);
    @include extjs-tool-icon('minus', 10);
    @include extjs-tool-icon('plus', 11);
    @include extjs-tool-icon('print', 12);
    @include extjs-tool-icon('up', 13);
    @include extjs-tool-icon('toggle', 13);
    @include extjs-tool-icon('collapse', 13);
    @include extjs-tool-icon('collapse-top', 13);
    @include extjs-tool-icon('left', 14);
    @include extjs-tool-icon('prev', 14);
    @include extjs-tool-icon('down', 15);
    @include extjs-tool-icon('collapse-bottom', 15);
    @include extjs-tool-icon('expand-bottom', 15);
    @include extjs-tool-icon('expand', 13);
    @include extjs-tool-icon('right', 16);
    @include extjs-tool-icon('next', 16);
    @include extjs-tool-icon('collapse-all', 17);
    @include extjs-tool-icon('expand-all', 18);
    @include extjs-tool-icon('pin', 19);
    @include extjs-tool-icon('unpin', 20);

    .x-collapsed {
        @include extjs-tool-icon('toggle', 15);
    }

    .x-accordion-hd {
        @include extjs-tool-icon('collapse-top', 1, true);
        @include extjs-tool-icon('collapse-bottom', 0, true);
        @include extjs-tool-icon('expand-top', 1, true);
        @include extjs-tool-icon('expand-bottom', 0, true);
    }

//    .#{$prefix}tool-prev {
//        background-position: 0 -105px;
//    }
    
//    .#{$prefix}tool-next {
//        background-position: 0 -120px;
//    }
    
//    .#{$prefix}tool-pin {
//        background-position: 0 -135px;
//    }

//    .#{$prefix}tool-unpin {
//        background-position: 0 -150px;
//    }

//    .#{$prefix}tool-right {
//        background-position: 0 -165px;
//    }

//    .#{$prefix}tool-left {
//        background-position: 0 -180px;
//    }




//    .#{$prefix}tool-up:after {
//        content: "{";
//    }

//    .#{$prefix}tool-down:after {
//        content: "}";
//    }
    
//    .#{$prefix}tool-collapse {
//        background-position: 0 -345px;
//    }

//    .#{$prefix}tool-expand {
//        background-position: 0 -330px;
//    }


//    .#{$prefix}tool-expand-bottom,
//    .#{$prefix}tool-collapse-bottom {
//        background-position: 0 -195px;
//    }

//    .#{$prefix}tool-expand-top,
//    .#{$prefix}tool-collapse-top,
//    .#{$prefix}tool-expand-bottom,
//    .#{$prefix}tool-collapse-bottom {
//        // background-position: 0 -210px;
//        background-color: #8DC3E8;//darken($base-color, 10%);

//        &:after {
////            @include triangle($color: lighten($base-color, 30%), $size: 12px);
//            @include triangle($color: #0A54B0, $size: 12px);
//            @include scale(.7, .5, 0, 0);
//            position: absolute;
//            left: 2px;
//            top: 3px;
//        }
//    }

//    .#{$prefix}tool-expand-bottom,
//    .#{$prefix}tool-collapse-bottom {
//        @include rotate(180deg);
//    }

//    .#{$prefix}tool-expand-left,
//    .#{$prefix}tool-collapse-left {
//        background-position: 0 -180px;
//    }

//    .#{$prefix}tool-expand-right,
//    .#{$prefix}tool-collapse-right {
//        background-position: 0 -165px;
//    }

//    .#{$prefix}tool-over {
//        .#{$prefix}tool-prev,
//        .#{$prefix}tool-next,
//        .#{$prefix}tool-pin,
//        .#{$prefix}tool-unpin,
//        .#{$prefix}tool-right,
//        .#{$prefix}tool-left,
//        .#{$prefix}tool-down,
//        .#{$prefix}tool-up,
//        .#{$prefix}tool-expand,
//        .#{$prefix}tool-collapse,
//        .#{$prefix}tool-expand-bottom,
//        .#{$prefix}tool-collapse-bottom,
//        .#{$prefix}tool-expand-top,
//        .#{$prefix}tool-collapse-top,
//        .#{$prefix}tool-expand-left,
//        .#{$prefix}tool-collapse-left,
//        .#{$prefix}tool-expand-right,
//        .#{$prefix}tool-collapse-right {
//            background-position-y: -16px;
//        }
//    }
}

.#{$prefix}tool-base {
    width: $tool-size;
    height: $tool-size;

    background-image: theme-background-image($theme-name, 'tools.png');
}
.#{$prefix}tool-base-over {
    background-position-y: -$tool-size;
}
.#{$prefix}tool-base-pressed {
    background-position-y: -($tool-size * 2);
}

.#{$prefix}accordion-tool-base {
    width: $accordion-tool-size;
    height: $accordion-tool-size;

    background-image: theme-background-image($theme-name, 'tools-small.png');
}
.#{$prefix}accordion-tool-base-over {
    background-position-y: -$accordion-tool-size;
}
.#{$prefix}accordion-tool-base-pressed {
    background-position-y: -($accordion-tool-size * 2);
}

@mixin extjs-tool-icon($name, $offset, $accordion: false) {
    @if $accordion {
        .#{$prefix}tool-#{$name} {
            @extend .#{$prefix}accordion-tool-base;
            background-position-x: -($offset * $accordion-tool-size);
        }

        .#{$prefix}tool-over {
            .#{$prefix}tool-#{$name} {
                @extend .#{$prefix}accordion-tool-base-over;
            }
        }

        .#{$prefix}tool-pressed {
            .#{$prefix}tool-#{$name} {
                @extend .#{$prefix}accordion-tool-base-pressed;
            }
        }
    } @else {
        .#{$prefix}tool-#{$name} {
            @extend .#{$prefix}tool-base;
            background-position-x: -($offset * $tool-size);
        }

        .#{$prefix}tool-over {
            .#{$prefix}tool-#{$name} {
                @extend .#{$prefix}tool-base-over;
            }
        }

        .#{$prefix}tool-pressed {
            .#{$prefix}tool-#{$name} {
                @extend .#{$prefix}tool-base-pressed;
            }
        }
    }
}