/* Layout grid
   ========================================================================== */

/**
 * Flexbox/grid container.
 *
 * TODO: revise this when we drop IE11 and browser CSS Grid support is widespread.
 */

.txp-layout {
    display: flex; // Flexbox fallback for browsers without CSS Grid support.
    display: grid;
    gap: 0 2em;
    grid-template-columns: repeat(12, 1fr);
    flex-wrap: wrap; // Flexbox fallback for browsers without CSS Grid support.
    margin: 0 -1em; // Flexbox fallback for browsers without CSS Grid support.

    > * {
        box-sizing: border-box; // Flexbox fallback.
        min-width: 0; // Fix Firefox `pre` overflow issues.
        padding: 0 1em; // Flexbox fallback.
    }
}

/**
 * Generate sizes all for grid column cells.
 *
 * Because this is desktop first, all cells span variations are defined
 * initially (1 column full width, 2 column, 4 column). We will then
 * adjust them at various breakpoints.
 *
 * Example HTML:
 *
 * <div class="txp-layout-1col"></div>
 *
 * <div class="txp-layout-2col">
 * <div class="txp-layout-2col">
 *
 * <div class="txp-layout-3col">
 * <div class="txp-layout-3col-2span">
 *
 * <div class="txp-layout-4col-3span"></div>
 * <div class="txp-layout-4col"></div>
 */

.txp-layout-1col {
    grid-column: span 12;
    width: 100%; // Flexbox fallback.
}

.txp-layout-3col {
    grid-column: span 4;
    width: 33.333%; // Flexbox fallback.
}

.txp-layout-3col-2span {
    grid-column: span 8;
    width: 66.666%; // Flexbox fallback.
}

.txp-layout-4col-3span {
    grid-column: span 9;
    width: 75%; // Flexbox fallback.
}

.txp-layout-2col,
.txp-layout-4col-2span {
    grid-column: span 6;
    width: 50%; // Flexbox fallback.
}

.txp-layout-4col,
.txp-layout-4col-alt {
    grid-column: span 3;
    width: 25%; // Flexbox fallback.
}

// Override Flexbox fallback for browsers with CSS Grid support.
@supports (display: grid) {
    .txp-layout {
        margin: 0;
    }

    .txp-layout-1col,
    .txp-layout-2col,
    .txp-layout-3col,
    .txp-layout-3col-2span,
    .txp-layout-4col,
    .txp-layout-4col-alt,
    .txp-layout-4col-2span,
    .txp-layout-4col-3span {
        width: auto;
        padding: 0;
    }
}

.txp-layout-cell-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/**
 * Text columns (fixed proportion cell).
 *
 * Example HTML:
 *
 * <div class="txp-layout-textbox">
 */

.txp-layout-textbox {
    max-width: $text-column;
}


/* Inline grids
   ========================================================================== */

/**
 * Inline grid type layouts.
 *
 * You should define a specific width for each .txp-grid-cell, either as a class
 * attribute or style attribute, otherwise the cell width stretches to the
 * content within it.
 *
 * Example HTML:
 *
 * <div class="txp-grid">
 *     <div class="txp-grid-cell" style="width:30em;">
 *         Content
 *     </div>
 *     <div class="txp-grid-cell" style="width:15em;">
 *         Content
 *     </div>
 *     <div class="txp-grid-cell" style="width:15em;">
 *         Content
 *     </div>
 * </div>
 *
 * <ul class="txp-grid">
 *     <li>
 *         Content
 *     </li>
 *     <li>
 *         Content
 *     </li>
 *     <li>
 *         Content
 *     </li>
 * </ul>
 */

.txp-grid {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    margin: -2px;
    padding: 0;
    clear: both;
    list-style: none;

    > * {
        position: relative;
        margin: 2px;
    }
}

@supports (display: grid) {
    .txp-grid {
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        margin: 0;

        > * {
            margin: 0;
        }
    }
}

.txp-grid-cell {
    box-sizing: border-box;
    width: 9.384615384615385em; // 122px / 13px
    padding: 0 1em;
    border: 1px solid $color-border;
}

@include dark-mode {
    .txp-grid-cell {
        border-color: $dark-color-border;
    }
}

@supports (display: grid) {
    .txp-grid-cell {
        width: auto;
    }
}

.txp-grid-cell-2span {
    min-width: 19.076923076923077em; // 248px / 13px
}

@supports (display: grid) {
    .txp-grid-cell-2span {
        grid-column: span 2;
        min-width: unset;
    }
}

.txp-grid-cell-3span {
    min-width: 28.769230769230769em; // 374px / 13px
}

@supports (display: grid) {
    .txp-grid-cell-3span {
        grid-column: span 3;
        min-width: unset;
    }
}

.txp-grid-multi-edit {
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    padding: 3px 6px;
    border: 1px solid $color-border-light;
    border-top: 0;
    border-left: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

@include dark-mode {
    .txp-grid-multi-edit {
        border-color: $dark-color-border-light;
    }
}