/* Layout classes for the visualizer app
Each number of wl-groups (1-3) has its own layout class which is applied to the
out html Div. These classes specify grid templates with 1-3 columns and 9 rows.

For each outer html Div layout class, there are also layout classes for the
children cards. These set the grid position the card inhabits. Grid-row will
then later be superceded by the card's adjusted row-span.

Comparison layout classes set the grid column span of the comparison card.

All classes are exchanged dynamically by the callbacks of the app.
*/


/* Single wl-group layout: */
.single-wl {
    display: grid;
    grid-template: repeat(9, min-content) / minmax(0, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
}

.single-wl-center {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

/* Double wl-group layout: */
.double-wl {
    display: grid;
    grid-template: repeat(9, min-content) / repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 10px;
}

.double-wl-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.double-wl-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}


/* Triple wl-group layout: */
.triple-wl {
    display: grid;
    grid-template: repeat(9, min-content) / repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 10px;
}

.triple-wl-right {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.triple-wl-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.triple-wl-center {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* Other wl-group layout classes: */
.wl-card-header {
    display: flex;
    justify-content: space-between;
}

.removed-wl {
    display: none;
}

/* Comparison layout classes: */
.bigcomparison {
    grid-column: span 3;
}

.mediumcomparison {
    grid-column: span 2;
}

.smallcomparison {
    display: flex;
}