.panel {
    --app-panel-spacing: var(--app-content-spacing);

    margin-bottom: var(--app-layout-spacing);

    .panel-header {
        display: flex;
        background-color: var(--app-color-brand);

        .panel-header-wrapper {
            flex-grow: 999999;
            display: flex;
            flex-wrap: wrap;
            padding: calc(var(--app-panel-spacing) * 0.5) var(--app-panel-spacing);
            align-items: center;
            gap: calc(var(--app-content-spacing) * 0.5);
        }

        .panel-title {
            flex-grow: 999999;
            color: var(--app-color-white);

            > *  {
                margin: 0;
            }
        }

        .panel-buttons {
            flex-grow: 1;

            .btn-primary {
                --bs-btn-bg: var(--app-color-white);
                --bs-btn-border-color: var(--app-color-white);
                --bs-btn-color: var(--app-color-purple);
                --bs-btn-hover-bg: var(--app-color-blue-lightest);
                --bs-btn-hover-border-color: var(--app-color-blue-lightest);
                --bs-btn-hover-color: var(--app-color-purple-dark);
                --bs-btn-active-bg: var(--app-color-blue-lightest);
                --bs-btn-active-border-color: var(--app-color-blue-lightest);
                --bs-btn-active-color: var(--app-color-purple-dark);
            }

            .btn-outline-primary {
                --bs-btn-border-color: var(--app-color-white);
                --bs-btn-color: var(--app-color-white);
                --bs-btn-hover-border-color: var(--app-color-blue-lighter);
                --bs-btn-hover-color: var(--app-color-blue-lighter);
                --bs-btn-active-border-color: var(--app-color-blue-lighter);
                --bs-btn-active-color: var(--app-color-blue-lighter);
            }
        }
    }

    .panel-collapse-button {
        appearance: none;
        border: 0;
        padding: 1.5em;
        background-color: var(--app-color-blue-dark);

        svg {
            width: 2.5em;
            color: var(--app-color-white);
        }

        &:not(.collapsed) .panel-collapse-icon-collapsed {
            display: none;
        }

        &.collapsed .panel-collapse-icon-uncollapsed {
            display: none;
        }
    }

    .panel-body {
        background-color: var(--app-color-white);

        &:not(.no-padding) {
            padding: var(--app-panel-spacing);
        }
    }
}