.component-backend-inspector-group {
    .group-name {
        position: relative;
        background: transparent;
        padding-top: 6px;
        padding-bottom: 6px;
        cursor: pointer;
        font-weight: 600;
        color: @toolbar-color;
        user-select: none;

        span {
            display: block;
            padding-left: 14px;
            margin-left: -14px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:before {
                position: absolute;
                width: 10px;
                height: 6px;
                left: 0;
                top: 7px;
                background-position: -182px 0;
                transform: rotate(-90deg);
                transition: transform 0.3s;
            }
        }

        &.loading {
            span {
                margin-right: 50px;

                &:before {
                    display: none;
                }
            }

            .component-backend-loading-indicator {
                float: right;
                margin-top: -20px;
            }
        }

        &.expanded span:before {
            transform: rotate(0);
        }

        &.collapsed {
            border-bottom: 1px solid @primary-border;
        }

        &.hide-bottom-border-collapsed.collapsed {
            border-bottom: none;
        }

        &.has-errors {
            color: @brand-danger;
        }
    }

    .group-fade-in-enter-active {
        transition: opacity 0.3s;
    }

    .group-fade-in-enter {
        opacity: 0;
    }
}