// private
@mixin splitter-collapse-tool-padding($direction) {
    @if $direction == top {
        @if $splitter-collapse-tool-top-glyph-padding != 0 {
            padding: $splitter-collapse-tool-top-glyph-padding;
        }
    } @else if $direction == right {
        @if $splitter-collapse-tool-right-glyph-padding != 0 {
            padding: $splitter-collapse-tool-right-glyph-padding;
        }
    } @else if $direction == bottom {
        @if $splitter-collapse-tool-bottom-glyph-padding != 0 {
            padding: $splitter-collapse-tool-bottom-glyph-padding;
        }
    } @else if $direction == left {
        @if $splitter-collapse-tool-left-glyph-padding != 0 {
            padding: $splitter-collapse-tool-left-glyph-padding;
        }
    }
}

.#{$prefix}collapse-el {
    cursor: $collapse-tool-cursor;
    @if $collapse-tool-opacity != 1 {
        @include opacity($collapse-tool-opacity);
    }
    @if $enable-font-icons {
        color: $splitter-collapse-tool-glyph-color;
        display: table;
        table-layout: fixed;
        &:before {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    }
    @if ($splitter-collapse-tool-border-width != 0) and ($splitter-collapse-tool-border-width != null) {
        border: $splitter-collapse-tool-border-width $splitter-collapse-tool-border-style $splitter-collapse-tool-border-color;
    }

    @if ($splitter-collapse-tool-background-color != null) and ($splitter-collapse-tool-background-color != transparent) {
        background-color: $splitter-collapse-tool-background-color;
    }
}

.#{$prefix}layout-split-left {
    @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {
        @include font-icon($splitter-collapse-tool-left-glyph);
        @include splitter-collapse-tool-padding(left);
    } @else {
        background-image: theme-background-image('util/splitter/mini-left');
    }
}

.#{$prefix}layout-split-right {
    @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {
        @include font-icon($splitter-collapse-tool-right-glyph);
        @include splitter-collapse-tool-padding(right);
    } @else {
        background-image: theme-background-image('util/splitter/mini-right');
    }
}

@if $include-rtl {
    .#{$prefix}rtl {
        &.#{$prefix}layout-split-left {
            @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {
                @include font-icon($splitter-collapse-tool-right-glyph);
                @include splitter-collapse-tool-padding(right);
            } @else {
                background-image: theme-background-image('util/splitter/mini-right');
            }
        }

        &.#{$prefix}layout-split-right {
            @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {
                @include font-icon($splitter-collapse-tool-left-glyph);
                @include splitter-collapse-tool-padding(left);
            } @else {
                background-image: theme-background-image('util/splitter/mini-left');
            }
        }
    }
}

.#{$prefix}layout-split-top {
    @if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {
        @include font-icon($splitter-collapse-tool-top-glyph);
        @include splitter-collapse-tool-padding(top);
    } @else {
        background-image: theme-background-image('util/splitter/mini-top');
    }
}

.#{$prefix}layout-split-bottom {
    @if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {
        @include font-icon($splitter-collapse-tool-bottom-glyph);
        @include splitter-collapse-tool-padding(bottom);
    } @else {
        background-image: theme-background-image('util/splitter/mini-bottom');
    }
}

.#{$prefix}splitter-collapsed {
    .#{$prefix}layout-split-left {
        @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {
            @include font-icon($splitter-collapse-tool-right-glyph);
            @include splitter-collapse-tool-padding(right);
        } @else {
            background-image: theme-background-image('util/splitter/mini-right');
        }
    }

    .#{$prefix}layout-split-right {
        @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {
            @include font-icon($splitter-collapse-tool-left-glyph);
            @include splitter-collapse-tool-padding(left);
        } @else {
            background-image: theme-background-image('util/splitter/mini-left');
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl {
            &.#{$prefix}layout-split-left {
                @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {
                    @include font-icon($splitter-collapse-tool-left-glyph);
                    @include splitter-collapse-tool-padding(left);
                } @else {
                    background-image: theme-background-image('util/splitter/mini-left');
                }
            }

            &.#{$prefix}layout-split-right {
                @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {
                    @include font-icon($splitter-collapse-tool-right-glyph);
                    @include splitter-collapse-tool-padding(right);
                } @else {
                    background-image: theme-background-image('util/splitter/mini-right');
                }
            }
        }
    }

    .#{$prefix}layout-split-top {
        @if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {
            @include font-icon($splitter-collapse-tool-bottom-glyph);
            @include splitter-collapse-tool-padding(bottom);
        } @else {
            background-image: theme-background-image('util/splitter/mini-bottom');
        }
    }

    .#{$prefix}layout-split-bottom {
        @if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {
            @include font-icon($splitter-collapse-tool-top-glyph);
            @include splitter-collapse-tool-padding(top);
        } @else {
            background-image: theme-background-image('util/splitter/mini-top');
        }
    }
}

.#{$prefix}splitter-active {
    background-color: $splitter-active-background-color;
    @include opacity($splitter-active-opacity);

    .#{$prefix}collapse-el {
        @include opacity($splitter-active-collapse-tool-opacity);
    }
}

.#{$prefix}layout-split-left,
.#{$prefix}layout-split-right {
    top: 50%;
    margin-top: round(-$collapse-tool-size / 2);

    // Splitter width is configurable.
    // Tool must stretch within splitter.
    width: 100%;
    height: $collapse-tool-size;
}

.#{$prefix}layout-split-top,
.#{$prefix}layout-split-bottom {
    left: 50%;
    width: $collapse-tool-size;

    // Splitter height is configurable.
    // Tool must stretch within splitter.
    height: 100%;
    margin-left: round(-$collapse-tool-size / 2);
    @if $enable-font-icons {
        $splitter-collapse-tool-horizontal-line-height: $splitter-size;
        @if $splitter-collapse-tool-border-width != null {
            $splitter-collapse-tool-horizontal-line-height:
                    ($splitter-collapse-tool-horizontal-line-height - vertical($splitter-collapse-tool-border-width));
        }
        &:before {
            width: 100%;
            line-height: $splitter-collapse-tool-horizontal-line-height;
        }
    }
}

.#{$prefix}splitter-focus {
    .#{$prefix}keyboard-mode & {
        @include css-outline(
            $width: $splitter-focus-outline-width,
            $style: $splitter-focus-outline-style,
            $color: $splitter-focus-outline-color,
            $offset: $splitter-focus-outline-offset,
            $pseudo: true
        );
    }
}