.classlist-report {
    .dbqdclr-tab-bar-container {
        display: none;
        margin-bottom: $margin-default;

        &.dbqdclr-tab-bar-visible {
            display: flex;
            gap: 5px;
        }

        .dbqdclr-tab-bar-item {
            @include tab-bar-item-rounded($has-close-button: true);
        }

        // Hide the tab bar add button when there are no available folder document class lists left to show
        &[data-has-available-folder-document-class-lists="false"] {
            .dbqdclr-tab-bar-add-tab-button {
                display: none;
            }
        }
    }

    .dbqdclr-tab-content-container {
        border: 1px solid $global-border-color;
        border-radius: $border-radius-default;
        padding: ($padding-default / 2) 0;

        .dbqdclr-tab {
            display: none;

            &.dbqdclr-tab-active {
                display: block;
            }

            .dbqdclr-tab-placeholder {
                display: flex;
                flex-direction: column;
                align-items: center;

                .dbqdclr-tab-placeholder-icon {
                    svg {
                        fill: $text-color-default;
                        width: 60px;
                        height: 60px;
                    }
                }

                .dbqdclr-tab-placeholder-description {
                    font-size: $font-size-large;
                    color: $text-color-default;
                }

                .dbqdclr-add-button-container {
                    .dbqdclr-add-button {
                        display: flex;
                        align-items: center;
                        background: $background-button-default;
                        color: $text-color-button-default;
                        border-radius: $border-radius-button-default;
                        font-weight: $font-weight-bold;
                        text-decoration: none;
                        padding: 5px 10px 5px 5px;
                        margin: $margin-default;

                        svg {
                            fill: $text-color-button-default;
                        }
                    }   

                    .dbqdclr-add-button-dropdown-menu {
                        ul {
                            float: left;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            list-style-type: none;
                        }
                    }
                }
            }
        }
    }
}