/**
 * Usage
 *
 * <section class="panel2">
 *     <h2 class="panel__heading">Heading</h2>
 *     <div class="panel__body">Body</div>
 * </section
 */

.panelV2 {
    border: var(--panel-border);
    background-color: var(--panel-bg);
    box-shadow: var(--panel-box-shadow);
    border-radius: var(--panel-border-radius);
    height: fit-content;
    break-inside: avoid;
}

.panel__header {
    background-color: var(--panel-head-bg);
    color: var(--panel-head-fg);
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--panel-head-border-radius);
}

.panel__heading {
    background-color: var(--panel-head-bg);
    color: var(--panel-head-fg);
    display: block;
    margin: 0;
    padding: 7px 5px;
    font-size: 16px;
    flex-grow: 1;
    font-weight: normal;
    border-radius: var(--panel-head-border-radius);
}

.panel__header:has(+ [style='display: none;']),
.panel__header:has(+ [style='display: none;']) > .panel__heading,
.panel__header:has(+ [style='display: none;']) > .panel__actions,
.panel__header:has(+ [style='display: none;'])
    > .panel__actions
    > .panel__action,
.panel__heading:has(+ [style='display: none;']),
.panel__heading:has(+ .data-table-wrapper):not(:has(+ .data-table-wrapper tr)) {
    border-radius: var(--panel-head-border-radius);
}

.panel__heading--centered {
    text-align: center;
}

.panel__header-link {
    color: var(--panel-head-fg);
}

.panel__grouping {
    color: var(--panel-group-fg);
}

.panel__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 4px 4px 4px 12px;
    color: var(--panel-action-fg);
    background-color: var(--panel-head-bg);
}

.panel__actions,
.panel__actions > .panel__action:last-child,
.panel__actions > .panel__action:last-child > .form__group {
    border-radius: var(--panel-head-border-radius);
}

.panel__action {
    flex-shrink: 0;
    color: var(--panel-action-fg);
    font-size: 14px;
    background-color: var(--panel-head-bg);
}

.panel__action .form__button {
    margin: 0 3px;
}

@media only screen and (max-width: 1100px) {
    .panel__header {
        position: relative;
    }

    .panel__action {
        display: none;
    }

    .panel__actions {
        position: absolute;
        right: 0;
        top: 0;
        max-width: 90vw;

        &::before {
            content: '\22EE';
            cursor: pointer;
        }

        &:hover,
        &:focus {
            flex-direction: column;
            align-items: stretch;

            &::before {
                display: none;
            }

            .panel__action {
                display: block;
            }
        }
    }
}

.panel__tabs {
    display: flex;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    background-color: var(--data-table-th-bg);
}

.panel__tabs--centered {
    justify-content: space-around;
}

.panel__tab {
    background-color: var(--data-table-th-fg);
    padding: 8px 16px 6px 16px;
    list-style-type: none;
    border-bottom: 2px solid var(--data-table-th-fg);
    cursor: pointer;
    white-space: nowrap;
}

.panel__tab--full-width {
    flex: 1;
    text-align: center;
}

.panel__tab--active {
    color: #b0b0b0;
    border-bottom: 2px solid #888;
}

.panel__body {
    padding: 20px;
    font-size: 15px;
    display: flow-root;
    color: var(--panel-fg);
    background-color: var(--panel-bg);
    overflow-wrap: break-word;
    border-radius: var(--panel-body-border-radius);
}

.panel--grid-item {
    height: 100%;
}
