.#{$prefix}tool {
    cursor: $tool-cursor;
}

.#{$prefix}tool-tool-el {
    overflow: hidden;
    width: $tool-size;
    height: $tool-size;
    margin: 0;
    color: $tool-glyph-color;
    text-align: center;
    @if $tool-opacity != 1 {
        @include opacity($tool-opacity);
    }
    @if $tool-opacity-over != 1 or $tool-opacity != 1 {
        .#{$prefix}tool-over & {
            @include opacity($tool-opacity-over);
        }
    }
    @if $tool-opacity-pressed != 1 or $tool-opacity != 1 {
        .#{$prefix}tool-pressed & {
            @include opacity($tool-opacity-pressed);
        }
    }
}

// Default rules for focused tools when they are used in other contexts
// than a panel header. They must still look like panel header tools
.#{$prefix}tool-focus {
    .#{$prefix}keyboard-mode & {
        @include css-outline(
            $width: $tool-focus-outline-width,
            $style: $tool-focus-outline-style,
            $color: $tool-focus-outline-color,
            $offset: $tool-focus-outline-offset
        );
    }
}

.#{$prefix}tool-img {
    background-image: theme-background-image($tool-background-image);
}

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

.#{$prefix}tool-close {
    @if $enable-font-icons and ($tool-close-glyph != null) {
        @include font-icon($tool-close-glyph);
        background: none !important;
    } @else {
        background-position: 0 0;
    }
}

.#{$prefix}tool-minimize {
    @if $enable-font-icons and ($tool-minimize-glyph != null) {
        @include font-icon($tool-minimize-glyph);
        background: none;
    } @else {
        background-position: 0 (-$tool-size);
    }
}

.#{$prefix}tool-maximize {
    @if $enable-font-icons and ($tool-maximize-glyph != null) {
        @include font-icon($tool-maximize-glyph);
        background: none;
    } @else {
        background-position: 0 ($tool-size * -2);
    }
}

.#{$prefix}tool-restore {
    @if $enable-font-icons and ($tool-restore-glyph != null) {
        @include font-icon($tool-restore-glyph);
        background: none;
    } @else {
        background-position: 0 ($tool-size * -3);
    }
}

.#{$prefix}tool-toggle {
    @if $enable-font-icons and ($tool-toggle-up-glyph != null) {
        @include font-icon($tool-toggle-up-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -4);
    }

    .#{$prefix}panel-collapsed & {
        @if $enable-font-icons and ($tool-toggle-down-glyph != null) {
            @include font-icon($tool-toggle-down-glyph);
            background: none !important;
        } @else {
            background-position: 0 ($tool-size * -5);
        }
    }
}

.#{$prefix}tool-gear {
    @if $enable-font-icons and ($tool-gear-glyph != null) {
        @include font-icon($tool-gear-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -6);
    }
}

.#{$prefix}tool-prev {
    @if $enable-font-icons and ($tool-prev-glyph != null) {
        @include font-icon($tool-prev-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -7);
    }
}

.#{$prefix}tool-next {
    @if $enable-font-icons and ($tool-next-glyph != null) {
        @include font-icon($tool-next-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -8);
    }
}

.#{$prefix}tool-pin {
    @if $enable-font-icons and ($tool-pin-glyph != null) {
        @include font-icon($tool-pin-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -9);
    }
}

.#{$prefix}tool-unpin {
    @if $enable-font-icons and ($tool-unpin-glyph != null) {
        @include font-icon($tool-unpin-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -10);
    }
}

.#{$prefix}tool-right {
    @if $enable-font-icons and ($tool-right-glyph != null) {
        @include font-icon($tool-right-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -11);
    }
}

.#{$prefix}tool-left {
    @if $enable-font-icons and ($tool-left-glyph != null) {
        @include font-icon($tool-left-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -12);
    }
}

.#{$prefix}tool-down {
    @if $enable-font-icons and ($tool-down-glyph != null) {
        @include font-icon($tool-down-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -13);
    }
}

.#{$prefix}tool-up {
    @if $enable-font-icons and ($tool-up-glyph != null) {
        @include font-icon($tool-up-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -14);
    }
}

.#{$prefix}tool-refresh {
    @if $enable-font-icons and ($tool-refresh-glyph != null) {
        @include font-icon($tool-refresh-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -15);
    }
}

.#{$prefix}tool-plus {
    @if $enable-font-icons and ($tool-plus-glyph != null) {
        @include font-icon($tool-plus-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -16);
    }
}

.#{$prefix}tool-minus {
    @if $enable-font-icons and ($tool-minus-glyph != null) {
        @include font-icon($tool-minus-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -17);
    }
}

.#{$prefix}tool-search {
    @if $enable-font-icons and ($tool-search-glyph != null) {
        @include font-icon($tool-search-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -18);
    }
}

.#{$prefix}tool-save {
    @if $enable-font-icons and ($tool-save-glyph != null) {
        @include font-icon($tool-save-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -19);
    }
}

.#{$prefix}tool-help {
    @if $enable-font-icons and ($tool-help-glyph != null) {
        @include font-icon($tool-help-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -20);
    }
}

.#{$prefix}tool-print {
    @if $enable-font-icons and ($tool-print-glyph != null) {
        @include font-icon($tool-print-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -21);
    }
}

.#{$prefix}tool-expand {
    @if $enable-font-icons and ($tool-expand-glyph != null) {
        @include font-icon($tool-expand-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -22);
    }
}

.#{$prefix}tool-collapse {
    @if $enable-font-icons and ($tool-collapse-glyph != null) {
        @include font-icon($tool-collapse-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -23);
    }
}

.#{$prefix}tool-resize {
    @if $enable-font-icons and ($tool-resize-glyph != null) {
        @include font-icon($tool-resize-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -24);
    }
}

.#{$prefix}tool-move {
    @if $enable-font-icons and ($tool-move-glyph != null) {
        @include font-icon($tool-move-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -25);
    }
}

.#{$prefix}tool-expand-bottom {
    @if $enable-font-icons and ($tool-expand-bottom-glyph != null) {
        @include font-icon($tool-expand-bottom-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -13);
    }
}

.#{$prefix}tool-collapse-bottom {
    @if $enable-font-icons and ($tool-collapse-bottom-glyph != null) {
        @include font-icon($tool-collapse-bottom-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -13);
    }
}

.#{$prefix}tool-expand-top {
    @if $enable-font-icons and ($tool-expand-top-glyph != null) {
        @include font-icon($tool-expand-top-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -14);
    }
}

.#{$prefix}tool-collapse-top {
    @if $enable-font-icons and ($tool-collapse-top-glyph != null) {
        @include font-icon($tool-collapse-top-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -14);
    }
}

.#{$prefix}tool-expand-left {
    @if $enable-font-icons and ($tool-expand-left-glyph != null) {
        @include font-icon($tool-expand-left-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -12);
    }
}

.#{$prefix}tool-collapse-left {
    @if $enable-font-icons and ($tool-collapse-left-glyph != null) {
        @include font-icon($tool-collapse-left-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -12);
    }
}

.#{$prefix}tool-expand-right {
    @if $enable-font-icons and ($tool-expand-right-glyph != null) {
        @include font-icon($tool-expand-right-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -11);
    }
}

.#{$prefix}tool-collapse-right {
    @if $enable-font-icons and ($tool-collapse-right-glyph != null) {
        @include font-icon($tool-collapse-right-glyph);
        background: none !important;
    } @else {
        background-position: 0 ($tool-size * -11);
    }
}

@if $include-rtl {
    .#{$prefix}rtl {
        &.#{$prefix}tool-expand-left {
            @if $enable-font-icons and ($tool-expand-right-glyph != null) {
                @include font-icon($tool-expand-right-glyph);
                background: none !important;
            } @else {
                background-position: 0 ($tool-size * -11);
            }
        }

        &.#{$prefix}tool-collapse-left {
            @if $enable-font-icons and ($tool-collapse-right-glyph != null) {
                @include font-icon($tool-collapse-right-glyph);
                background: none !important;
            } @else {
                background-position: 0 ($tool-size * -11);
            }
        }

        &.#{$prefix}tool-expand-right {
            @if $enable-font-icons and ($tool-expand-left-glyph != null) {
                @include font-icon($tool-expand-left-glyph);
                background: none !important;
            } @else {
                background-position: 0 ($tool-size * -12);
            }
        }

        &.#{$prefix}tool-collapse-right {
            @if $enable-font-icons and ($tool-collapse-left-glyph != null) {
                @include font-icon($tool-collapse-left-glyph);
                background: none !important;
            } @else {
                background-position: 0 ($tool-size * -12);
            }
        }
    }
}

@if $tool-include-hover-icons {
    .#{$prefix}tool-over {
        @if (not $enable-font-icons) or ($tool-close-glyph == null) {
            .#{$prefix}tool-close {
                background-position: -$tool-size 0;
            }
        }

        @if (not $enable-font-icons) or ($tool-minimize-glyph == null) {
            .#{$prefix}tool-minimize {
                background-position: (-$tool-size) (-$tool-size);
            }
        }

        @if (not $enable-font-icons) or ($tool-maximize-glyph == null) {
            .#{$prefix}tool-maximize {
                background-position: (-$tool-size) ($tool-size * -2);
            }
        }

        @if (not $enable-font-icons) or ($tool-restore-glyph == null) {
            .#{$prefix}tool-restore {
                background-position: (-$tool-size) ($tool-size * -3);
            }
        }

        @if (not $enable-font-icons) or ($tool-toggle-up-glyph == null) {
            .#{$prefix}tool-toggle {
                background-position: (-$tool-size) ($tool-size * -4);
            }
        }

        @if (not $enable-font-icons) or ($tool-toggle-down-glyph == null) {
            .#{$prefix}panel-collapsed & {
                .#{$prefix}tool-toggle {
                    background-position: (-$tool-size) ($tool-size * -5);
                }
            }
        }

        @if (not $enable-font-icons) or ($tool-gear-glyph == null) {
            .#{$prefix}tool-gear {
                background-position: (-$tool-size) ($tool-size * -6);
            }
        }

        @if (not $enable-font-icons) or ($tool-prev-glyph == null) {
            .#{$prefix}tool-prev {
                background-position: (-$tool-size) ($tool-size * -7);
            }
        }

        @if (not $enable-font-icons) or ($tool-next-glyph == null) {
            .#{$prefix}tool-next {
                background-position: (-$tool-size) ($tool-size * -8);
            }
        }

        @if (not $enable-font-icons) or ($tool-pin-glyph == null) {
            .#{$prefix}tool-pin {
                background-position: (-$tool-size) ($tool-size * -9);
            }
        }

        @if (not $enable-font-icons) or ($tool-unpin-glyph == null) {
            .#{$prefix}tool-unpin {
                background-position: (-$tool-size) ($tool-size * -10);
            }
        }

        @if (not $enable-font-icons) or ($tool-right-glyph == null) {
            .#{$prefix}tool-right {
                background-position: (-$tool-size) ($tool-size * -11);
            }
        }

        @if (not $enable-font-icons) or ($tool-left-glyph == null) {
            .#{$prefix}tool-left {
                background-position: (-$tool-size) ($tool-size * -12);
            }
        }

        @if (not $enable-font-icons) or ($tool-down-glyph == null) {
            .#{$prefix}tool-down {
                background-position: (-$tool-size) ($tool-size * -13);
            }
        }

        @if (not $enable-font-icons) or ($tool-up-glyph == null) {
            .#{$prefix}tool-up {
                background-position: (-$tool-size) ($tool-size * -14);
            }
        }

        @if (not $enable-font-icons) or ($tool-refresh-glyph == null) {
            .#{$prefix}tool-refresh {
                background-position: (-$tool-size) ($tool-size * -15);
            }
        }

        @if (not $enable-font-icons) or ($tool-plus-glyph == null) {
            .#{$prefix}tool-plus {
                background-position: (-$tool-size) ($tool-size * -16);
            }
        }

        @if (not $enable-font-icons) or ($tool-minus-glyph == null) {
            .#{$prefix}tool-minus {
                background-position: (-$tool-size) ($tool-size * -17);
            }
        }

        @if (not $enable-font-icons) or ($tool-search-glyph == null) {
            .#{$prefix}tool-search {
                background-position: (-$tool-size) ($tool-size * -18);
            }
        }

        @if (not $enable-font-icons) or ($tool-save-glyph == null) {
            .#{$prefix}tool-save {
                background-position: (-$tool-size) ($tool-size * -19);
            }
        }

        @if (not $enable-font-icons) or ($tool-help-glyph == null) {
            .#{$prefix}tool-help {
                background-position: (-$tool-size) ($tool-size * -20);
            }
        }

        @if (not $enable-font-icons) or ($tool-print-glyph == null) {
            .#{$prefix}tool-print {
                background-position: (-$tool-size) ($tool-size * -21);
            }
        }

        @if (not $enable-font-icons) or ($tool-expand-glyph == null) {
            .#{$prefix}tool-expand {
                background-position: (-$tool-size) ($tool-size * -22);
            }
        }

        @if (not $enable-font-icons) or ($tool-collapse-glyph == null) {
            .#{$prefix}tool-collapse {
                background-position: (-$tool-size) ($tool-size * -23);
            }
        }

        @if (not $enable-font-icons) or ($tool-resize-glyph == null) {
            .#{$prefix}tool-resize {
                background-position: (-$tool-size) ($tool-size * -24);
            }
        }

        @if (not $enable-font-icons) or ($tool-move-glyph == null) {
            .#{$prefix}tool-move {
                background-position: (-$tool-size) ($tool-size * -25);
            }
        }

        @if (not $enable-font-icons) or ($tool-expand-bottom-glyph == null) {
            .#{$prefix}tool-expand-bottom {
                background-position: (-$tool-size) ($tool-size * -13);
            }
        }

        @if (not $enable-font-icons) or ($tool-collapse-bottom-glyph == null) {
            .#{$prefix}tool-collapse-bottom {
                background-position: (-$tool-size) ($tool-size * -13);
            }
        }

        @if (not $enable-font-icons) or ($tool-expand-top-glyph == null) {
            .#{$prefix}tool-expand-top {
                background-position: (-$tool-size) ($tool-size * -14);
            }
        }

        @if (not $enable-font-icons) or ($tool-collapse-top-glyph == null) {
            .#{$prefix}tool-collapse-top {
                background-position: (-$tool-size) ($tool-size * -14);
            }
        }

        @if (not $enable-font-icons) or ($tool-expand-left-glyph == null) {
            .#{$prefix}tool-expand-left {
                background-position: (-$tool-size) ($tool-size * -12);
            }
        }

        @if (not $enable-font-icons) or ($tool-collapse-left-glyph == null) {
            .#{$prefix}tool-collapse-left {
                background-position: (-$tool-size) ($tool-size * -12);
            }
        }

        @if (not $enable-font-icons) or ($tool-expand-right-glyph == null) {
            .#{$prefix}tool-expand-right {
                background-position: (-$tool-size) ($tool-size * -11);
            }
        }

        @if (not $enable-font-icons) or ($tool-collapse-right-glyph == null) {
            .#{$prefix}tool-collapse-right {
                background-position: (-$tool-size) ($tool-size * -11);
            }
        }

        @if $include-rtl {
            .#{$prefix}rtl {
                @if (not $enable-font-icons) or ($tool-expand-right-glyph == null) {
                    &.#{$prefix}tool-expand-left {
                        background-position: (-$tool-size) ($tool-size * -11);
                    }
                }

                @if (not $enable-font-icons) or ($tool-collapse-right-glyph == null) {
                    &.#{$prefix}tool-collapse-left {
                        background-position: (-$tool-size) ($tool-size * -11);
                    }
                }

                @if (not $enable-font-icons) or ($tool-expand-left-glyph == null) {
                    &.#{$prefix}tool-expand-right {
                        background-position: (-$tool-size) ($tool-size * -12);
                    }
                }

                @if (not $enable-font-icons) or ($tool-collapse-left-glyph == null) {
                    &.#{$prefix}tool-collapse-right {
                        background-position: (-$tool-size) ($tool-size * -12);
                    }
                }
            }
        }
    }
}