.#{$prefix}accordion-layout-ct {
    background-color: $accordion-background-color;
    padding: $accordion-padding;
}

.#{$prefix}accordion-hd .#{$prefix}panel-header-title {
    color: $accordion-header-color;
    font-weight: $accordion-header-font-weight;
    font-family: $accordion-header-font-family;
    text-transform: $accordion-header-text-transform;
    
    &.#{$prefix}title-focus {
        .#{$prefix}keyboard-mode & {
            @if not is-null($accordion-header-focus-color) {
                color: $accordion-header-focus-color;
            }

            @if not is-null($accordion-header-focus-background-color) {
                background-color: $accordion-header-focus-background-color;
            }

            @if not is-null($accordion-header-focus-outline-width) {
                @include css-outline(
                    $width: $accordion-header-focus-outline-width,
                    $style: $accordion-header-focus-outline-style,
                    $color: $accordion-header-focus-outline-color,
                    $offset: $accordion-header-focus-outline-offset
                );
            }
        }
    }
}

.#{$prefix}accordion-item {
    margin: $accordion-item-margin;

    .#{$prefix}accordion-hd {
        background: $accordion-header-background-color;
        border-width: $accordion-header-border-width;
        border-color: $accordion-header-border-color;
        padding: $accordion-header-padding;
    }

    @if $accordion-header-over-background-color != $accordion-header-background-color {
        .#{$prefix}accordion-hd-over {
            background-color: $accordion-header-over-background-color;
            
            .#{$prefix}tool-tool-el {
                background-color: $accordion-header-over-background-color;
            }
        }
    }

    .#{$prefix}accordion-hd-sibling-expanded {
        border-top-color: bottom($accordion-header-border-color);
        border-top-width: bottom($accordion-header-border-width);
    }

    .#{$prefix}accordion-hd-last-collapsed {
        border-bottom-color: $accordion-header-background-color;
    }

    .#{$prefix}accordion-body {
        border-width: $accordion-body-border-width;
    }
}

.#{$prefix}accordion-hd {
    // EXTJSIV-8846: partially transparent png images do not display correctly
    // in winXP/IE8m when the image element has a transparent background.
    // to fix this, we give the element the same background-color as the header.
    .#{$prefix}tool-tool-el {
        background-color: $accordion-header-background-color;
        color: $accordion-tool-glyph-color;
    }
    
    .#{$prefix}tool-img {
        @if $accordion-tool-background-image != $panel-tool-background-image {
            background-image: theme-background-image($accordion-tool-background-image);
        }

        @if $enable-font-icons {
            background-image: none;
        }
    }

    .#{$prefix}tool-collapse-top,
    .#{$prefix}tool-collapse-bottom {
        @if $enable-font-icons and ($accordion-tool-collapse-glyph != null) {
            @include font-icon($accordion-tool-collapse-glyph);
            background-image: none;
        } @else {
            background-position: 0 ($accordion-header-tool-size * -17);
        }
    }
    
    @if $tool-include-hover-icons {
        .#{$prefix}tool-over {
            .#{$prefix}tool-collapse-top,
            .#{$prefix}tool-collapse-bottom {
                background-position: (-$accordion-header-tool-size) ($accordion-header-tool-size * -17);
            }
        }
    }

    .#{$prefix}tool-expand-top,
    .#{$prefix}tool-expand-bottom {
        @if $enable-font-icons and ($accordion-tool-expand-glyph != null) {
            @include font-icon($accordion-tool-expand-glyph);
            background-image: none;
        } @else {
            background-position: 0 ($accordion-header-tool-size * -16);
        }
    }
    
    @if $tool-include-hover-icons {
        .#{$prefix}tool-over {
            .#{$prefix}tool-expand-top,
            .#{$prefix}tool-expand-bottom {
                background-position: (-$accordion-header-tool-size) ($accordion-header-tool-size * -16);
            }
        }
    }

    .#{$prefix}tool-focus {
        .#{$prefix}keyboard-mode & {
            .#{$prefix}tool-tool-el {
                @if not is-null($accordion-tool-focus-color) {
                    color: $accordion-tool-focus-color;
                }

                @if not is-null($accordion-tool-focus-background-color) {
                    background-color: $accordion-tool-focus-background-color;
                }
            }

            @if $accordion-tool-focus-background-image != $accordion-tool-background-image {
                .#{$prefix}tool-img {
                    background-image: theme-background-image($accordion-tool-focus-background-image);
                }

                @if $enable-font-icons {
                    background-image: none;
                }
            }

            @if not is-null($accordion-tool-focus-outline-width) {
                @include css-outline(
                    $width: $accordion-tool-focus-outline-width,
                    $style: $accordion-tool-focus-outline-style,
                    $color: $accordion-tool-focus-outline-color,
                    $offset: $accordion-tool-focus-outline-offset
                );
            }
        }
    }
}