.ui-accordion:not(#cpanelul) when (@componentsJS-accordion) {
    .ui-accordion-header {
        display       : block;
        position      : relative;
        cursor        : pointer;
        margin-top    : 2px;
        margin-bottom : 0;
        color         : @accordion-header-color;
        background    : @accordion-header-bg;
        padding       : .5em .75em;

        &:hover {
            color      : @accordion-header-color-hover;
            background : @accordion-header-bg-hover;
        }

        a {
            color           : inherit;
            text-decoration : none;
        }

        &.ui-accordion-header-active {
            color      : @accordion-header-color-active;
            background : @accordion-header-bg-active;
        }

        &.icon-right {
            &::before {
                color       : @brand-success;
                float       : right;
                line-height : inherit;
            }
        }
    }

    .ui-accordion-icons {
        .ui-accordion-header-icon {
            .inline-block;
            margin-left  : -.25em;
            margin-right : .25em;
            .icon-size(@icon-size-base);
        }
    }

    .ui-accordion-noicons {
    }

    .ui-accordion-content {
        background    : @accordion-content-bg;
        border        : @accordion-content-border-width solid @accordion-content-border-color;
        border-top    : none;
        margin-top    : 0;
        margin-bottom : 0;
        padding       : .75em;
        overflow      : auto;
    }
}