@import "shared/mixins-and-vars";

//
// Note: The LESS table color variables are in the mixins-and-vars.less file.
//

.sticky-table {

    /* Is this still needed? */
    &__keyboard-instructions {
        display: none;
        background: black;
        color: white;
        padding: 10px;
        font-size: (12 / @px);
        position: absolute;
        top: 0;
    }

    &__container {
        overflow: auto;
        max-height: 70vh;
        position: relative;

        &--horizontal-scroll {
            overflow: auto;
        }

        &:focus-within {
            outline: @focus-color 2px solid;

            .sticky-table__keyboard-instructions {
                display: block;
            }
        }

        table,
        [role="table"] {
            margin-bottom: 0;
            position: relative;
            

            .enable__is-dark-mode & {
                border-color: @table-cell-border-color--dark-mode;
            }
        }

        thead {
            background: @table-header-border-color;
            transform: translateZ(1px);

            .enable__is-dark-mode & {
                background: @table-header-border-color--dark-mode;
            }
        }

        th[scope="col"],
        [role="columnheader"] {
            .sticky();
            top: 0; // was (38/@px);
        }

        th[scope="row"],
        [role="rowheader"] {
            .sticky();
            left: 0;
            z-index: 1;
        }
    }

    &__sticky-horiz-heading {
        .sticky();
        left: 0;
        z-index: 1;
    }
}

caption,
.caption,
table + figcaption {
    display: table-caption;
    text-align: center;
    font-style: italic;
    font-family: "Times New Roman", serif;
    .width-fit-content();
    margin: 1em auto;
    position: relative;
    max-width: calc(100% - 200px);

    /* 
        * The decorations around the captions are for tablet and up,
        * since mobile doesn't have enough room
        */
    @media @tablet-up {
        &:before,
        &:after {
            /* This is the squiggly line PNG used to decorate the caption */
            content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAAQCAYAAAC4LkmaAAACLElEQVR42uzXAwhdcRTH8dm2bdu2bdtptm3b3sLsLc1WnG3bZ9/qVM/2e6c+1/r/rqOISIQLPLmxSHBUA0xAnFBqLBVV+xnQHRtxDS/xFndwCM2dDo6ai3+4gBdIFAKB5Uc3bMMHiLqH49iMVdiEE/iibW/mUHBUAXxGGh2fh0FeblQqtMUwjEMnZPXQtjviJj5C1CG0QlokQSyTdWLpMY2AYKojwXXCaoPxLFjg4aASIh/G4DHExD/tX0NlRHNi23GRFxPwB4JXOIX2LhxrfXxHTXvB9cIMg/GCaOGhwApgvgYi6jV2YyxaoApKoyyaYjbGIY6dbafHKJyGqANojWxuHndn3LYXXF1cMxiv5O7DGFVxCYK/eIYJyGiybGpEtXKFZjXZZnTE0LCvGFypXzALST1w3Cm0nxgPUd5WcEnwGfXc3HE5Dec+BHexEJVtrJMb49EDhTTIZEiHfKiH/liEUxD1EOvQyIOPk0KGGVA7MdPeW3UAPiCjkzuLicHakJ8QnEVpJHBwG4kwC4LPeIf3OvzL5Dm4GSWREFE9/BxegVIG49uxyJHvuB24i+KIbaOROdESeyDqETYhnxsHngLjcASXcBlHMR3VfPD5shL9dDgpnqCiI8HFxFyIHvQC9MdQLMR+3MQPCP5gDeogbQh89+XDZyzHDRx26peLyo7j+IZf+Inv+KrBzcb/mQ/HLhW0Rv4ASSSYnQBSyi8ZIJYeiJ7EaCd/NOBGMQAC8O/gL/6CHwAAAABJRU5ErkJggg==);
            display: inline-block;
            position: absolute;
            margin: 0 1em;
            top: 3px;

            .enable__is-dark-mode & {
                filter: invert(100%);
            }
        }

        &:before {
            left: -110px;
        }
        &:after {
            transform: scaleX(-1);
            right: -110px;
        }
    }
}

figure figcaption.caption {
    display: block;
    margin-top: 1em;
}

table,
[role="table"] {
    width: initial;
    min-width: 50%;
    max-width: 1024px;
    border-collapse: collapse;
    display: table;
    margin: 0 auto;

    .nowrap {
        white-space: nowrap;
    }

    figure & {
        margin-bottom: 0;
    }

    th,
    td,
    [role="columnheader"],
    [role="rowheader"],
    [role="cell"] {
        line-height: 1.2;
        padding: 10px;
        display: table-cell;
        font-size: (14 / @px);
    }

    td,
    [role="cell"] {
        text-align: center;
    }

    tfoot td {
        text-align: left;
    }

    tbody th,
    tfoot th,
    [role="rowheader"] {
        text-align: right;
    }

    th,
    [role="columnheader"],
    [role="rowheader"] {
        font-weight: bold;
        color: @table-header-text-color;
        background-color: @table-header-background;

        code {
            display: inline;
            background-color: transparent;
            color: #0a0;
        }

        .enable__is-dark-mode & {
            background-color: @table-header-background--dark-mode;
            color: @table-header-text-color--dark-mode;
        }
    }

    tr,
    [role="row"] {
        display: table-row;
        background-color: @table-cell-background;

        .enable__is-dark-mode & {
            background-color: @table-cell-background--dark-mode;
        }

        &:nth-child(2n) {
            background-color: @table-cell-background2;

            .enable__is-dark-mode & {
                background-color: @table-cell-background2-dark-mode;
            }
        }
    }


    [role="rowgroup"] {
        display: table-row-group;

    }

    .thead {
        [role="row"] {
            background-color: @table-header-background;

            .enable__is-dark-mode & {
                background-color: @table-header-background--dark-mode;
            }
        }
    }

    @table-width: 100%;
    @table-column-width: (@table-width / 7);
    @table-body-height: 80vh;

    &.fixed-headers {
        border-collapse: collapse;

        &,
        & thead,
        & .thead {
            width: @table-width;
        }

        td,
        th,
        [role="columnheader"],
        [role="rowheader"],
        [role="cell"] {
            overflow: hidden;
            width: @table-column-width;
            max-width: @table-column-width;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            -ms-hyphens: auto;
            -o-hyphens: auto;
            hyphens: auto;
        }

        th,
        [role="columnheader"],
        [role="rowheader"] {
            border-left: solid 1px @table-header-border-color;
            border-right: solid 1px @table-header-border-color;

            .enable__is-dark-mode & {
                border-left: solid 1px @table-cell-border-color--dark-mode;
                border-right: solid 1px @table-cell-border-color--dark-mode;
            }
        }

        td,
        [role="cell"] {
            border-left: solid 1px @table-cell-border-color;
            border-right: solid 1px @table-cell-border-color;

            .enable__is-dark-mode & {
                border-left: solid 1px @table-cell-border-color--dark-mode;
                border-right: solid 1px @table-cell-border-color--dark-mode;
            }
        }
        thead,
        .thead {
            tr {
                display: block;
                position: relative;
            }
        }
        tbody,
        .tbody {
            display: block;
            overflow: auto;
            width: calc(~"100% + 16px");
            height: @table-body-height;
        }
    }

    .rowspan2 {
        &__top {
            border-bottom: none;
            vertical-align: bottom;

            .enable__is-dark-mode & {
                border-bottom: none;
            }

            span {
                display: inline-block;
                transform: translateY(1rem);
            }
        }

        &__bottom {
            border-top: none;

            .enable__is-dark-mode & {
                border-top: none;
            }
        }
    }
}

.enable-table {


    &--horizontally-scrollable {
        overflow-y: scroll;
    }
    
    &--centered-data {
        th,
        td {
            text-align: center;
        }
    }

    &--with-borders {
        th {
            border-left: solid 1px @table-header-border-color;
            border-right: solid 1px @table-header-border-color;

            .enable__is-dark-mode & {
                border-left: solid 1px @table-header-border-color--dark-mode;
                border-right: solid 1px @table-header-border-color--dark-mode;
            }

            &:first-child {
                border-left: solid 1px @table-header-background;

                .enable__is-dark-mode & {
                    border-left: solid 1px @table-header-background--dark-mode;
                }
            }

            &:last-child {
                border-right: solid 1px @table-header-background;

                .enable__is-dark-mode & {
                    border-right: solid 1px @table-header-background--dark-mode;
                }
            }
        }

        td {
            border: solid 1px @table-cell-border-color;

            .enable__is-dark-mode & {
                border-color: @table-cell-border-color--dark-mode;
            }
        }
    }
}

&.enable-table .screenshot-table {
    margin: 0 auto;
    width: initial;
    max-width: initial;

    th[scope="row"] {
        vertical-align: middle;
    }

    td {
        padding: 0;
    }
}