.tab-container {
    display: grid;
    overflow-y            : auto;
    width                 : 100%;
    padding: 5px;
    white-space           : normal;
    grid-template-areas   : "tab-bar" "tab-body";
    grid-template-columns: 100%;
    grid-template-rows    : min-content 1fr;
}
.tab-container > .tab-bar {
    display: flex;
    flex-wrap: wrap;
    color            : var(--theme-font-5);
    border-radius    : var(--theme-border-radius);
    background-color: var(--theme-primary);
    grid-area        : tab-bar;
}
.tab-container > .tab-bar > .tab-btn {
    padding       : 10px;
    border-radius : var(--theme-border-radius);
    color: var(--theme-font-on-primary);
}
.tab-container > .tab-bar > .tab-btn[data-active-tab] {
    background-color : var(--theme-primary-dark);
}
.tab-container > .tab-bar > .tab-btn:hover {
    cursor           : pointer;
    background-color : var(--theme-primary-light);
}

.tab-container > .tab-body:not([data-active-tab]) {
    display: none;
    overflow-y : auto;
    height     : 100%;
}
.tab-container > .tab-body[data-active-tab] {
    display   : block;
    padding: 5px 0px;
    grid-area : tab-body;
    position: relative;
    min-height: 50px;
}

.tab-body > table {
    /* max-width: min-content; */
    width: 100%;
}
.tab-body[data-active-tab] > table.align-top > tbody > tr > td {
    vertical-align: top;
}
.tab-body img {
    max-width: 100%;
}