/*********************
 * Bracket layout    *
 *********************/

/* Overrideable variables */
.bracket {
    --cell-width: 9em;
    --cell-lines: 1;
    --r1-padding: 0.5em;
    --condensed-overlap: 0.5;
}
/* Non-overrideable variables */
.bracket {
    --ltr: 1;
    --cell-height: calc(var(--cell-lines) * 1.2em);
}

.bracket div { position: relative; }
.bracket-half > div { display: inline-block; }
.bracket-tree-undefined { vertical-align: middle;}
.bracket-tree-top { vertical-align: bottom;}
.bracket-tree-bottom { vertical-align: top;}
.bracket-cell {
    position: relative;
    display: block;
    width: var(--cell-width);
    height: var(--cell-height);
    background-color: #8883;
    background-clip: content-box;
    right: 0;
    direction: ltr;
    text-align: center;
}

.bracket-winner-1.bracket-winner-top { padding-top: var(--r1-padding); }
.bracket-winner-1.bracket-winner-bottom { padding-bottom: var(--r1-padding); }

.bracket-champion { padding-left: 1em; padding-right: 1em; }

/*********************
 * Bracket lines     *
 *********************/

/* Vertical line */

.bracket-tree-top > .bracket-half-bottom::after,
.bracket-tree-bottom > .bracket-half-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 0.1em solid;
}

/* Horizontal line */

.bracket-winner-bottom > .bracket-cell { border-top: 0.05em solid; }
.bracket-winner-top > .bracket-cell { border-bottom: 0.05em solid; }

/*********************
 * Alternate formats *
 *********************/

/* reversed : right to left */

    /* Multiplier for rotation, condensed */
    .reversed.bracket { direction: rtl; --ltr: -1}

    /* Switch side for vertical bracket line */
    .reversed .bracket-tree-top > .bracket-half-bottom::after,
    .reversed .bracket-tree-bottom > .bracket-half-top::after { border-right: none; border-left: 0.1em solid; }

/* condensed : Horizontally overlapping layout */

    /* Shift cells into vertical lines */
    .condensed .bracket-winner {
        width: calc(var(--cell-width) * (1 - var(--condensed-overlap)));
        right: calc(var(--cell-width) * var(--condensed-overlap) * var(--ltr));
    }

    /* ... except for first two rounds and champion */
    .condensed .bracket-winner-1,
    .condensed .bracket-winner-2,
    .condensed .bracket-champion { width: var(--cell-width); right: 0; }

    /* Shorten vertical line to not overlap shifted cells */
    .condensed .bracket-tree-top > .bracket-half-bottom::after,
    .condensed .bracket-tree-bottom > .bracket-half-top::after {
        height: calc(max(100% - var(--cell-height), var(--cell-height) + var(--r1-padding) * 1.1));
    }

    /* Shortened vertical line on bottom instead of top of top bracket-half */
    .condensed .bracket-tree-bottom > .bracket-half-top::after { top: unset; bottom: 0; }

/* bigwinner : Double-sized, rotated champion */

    .bigwinner .bracket-champion { width: calc(var(--cell-height) * 2); }

    .bigwinner .bracket-champion > .bracket-cell {
        transform: rotate(calc(90deg * var(--ltr)));
        font-size: 200%;
        right: calc((var(--cell-width) / 2 - var(--cell-height) / 2) * var(--ltr));
    }