.panel {
    border-width: var(--hh-ct-panel-border-width);
    border-style: var(--hh-ct-panel-border-style);
    border-color: var(--hh-ct-panel-border-color);
    border-radius: var(--hh-ct-panel-border-radius);
    box-shadow: var(--hh-ct-panel-box-shadow);

    .panel {
        border: none;
        box-shadow: none;
    }

    &,
    > .panel-collapse {
        > .list-group:last-child .list-group-item:last-child {
            border-bottom-left-radius: var(--hh-ct-panel-border-radius);
            border-bottom-right-radius: var(--hh-ct-panel-border-radius);
        }
    }

    .panel-heading {
        border-radius: var(--hh-ct-panel-border-radius);
        font-size: var(--hh-ct-ph-font-size);
        font-weight: var(--hh-ct-ph-font-weight);
    }

    .panel-body {
        font-size: var(--hh-ct-font-size);
        font-weight: var(--hh-ct-font-weight);
    }

    h1 {
        font-size: var(--hh-ct-h1-font-size);
    }

    h2 {
        font-size: var(--hh-ct-h2-font-size);
    }

    h3 {
        font-size: var(--hh-ct-h3-font-size);
    }

    h4 {
        font-size: var(--hh-ct-h4-font-size);
    }

    h5 {
        font-size: var(--hh-ct-h5-font-size);
    }

    h6 {
        font-size: var(--hh-ct-h6-font-size);
    }
}

.panel-group .panel {
    border-radius: var(--hh-ct-panel-border-radius);
}

// Space and User profile banner
.panel-profile {
    .panel-profile-header {
        border-radius: var(--hh-ct-panel-border-radius);
        border-top-right-radius: var(--hh-ct-panel-border-radius);
        border-top-left-radius: var(--hh-ct-panel-border-radius);

        .image-upload-container {
            border-radius: var(--hh-ct-panel-border-radius);
        }

        img.img-profile-header-background {
            min-height: 100px;
            object-fit: cover;

            // Hide default gray image
            &[src$="/img/default_banner.jpg"] {
                width: 0;
            }
        }

        div.img-profile-header-background {
            border-radius: 50% !important;
        }

        .img-profile-data {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.4) 100%);

            &, h1, h2 {
                color: var(--hh-text-color-contrast);
                text-shadow: 0 0 4px var(--hh-text-color-highlight); // For a better visibility on an image
            }

            h1 {
                margin-bottom: 0;
                a {
                    font-weight: var(--hh-ct-font-bold-weight);
                    font-size: 30px;
                    @include media-breakpoint-down(sm) {
                        font-size: 20px;
                    }
                }
            }

            h2.space {
                font-weight: var(--hh-ct-font-family);
                margin-bottom: 0;
                line-height: 16px;
            }
        }

        // If no image
        img.img-profile-header-background[src$="/img/default_banner.jpg"] + .img-profile-data {
            background: var(--bs-primary);

            &, h1, h2 {
                text-shadow: none !important;
            }
        }

        .profile-user-photo-container {
            .profile-user-photo {

                // Force position of the online status because of rounded corners
                + .user-online-status {
                    right: 8px;
                    bottom: 8px;
                }
            }
        }
    }

    .panel-body {
        min-height: 50px; // In case there is no button
    }
}
