/*------------------------------------*\
    TABLES
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

$table-border-colour: settings.$ds_colour__border !default;
$table-border-colour--light: settings.$ds_colour__border--faint !default;
$table-header-background-colour: settings.$ds_colour__background--tertiary !default;
$table-row-zebra-colour: settings.$ds_colour__background--secondary !default;

// Fixed vars
$table-border-width: 0.0625rem; // 1px


.ds_table {
    // table-layout: fixed;
    width: 100%;
    @include helpers.ds_responsive-margin(2, bottom);


    caption {
        font-size: helpers.px-to-rem(settings.$root-font-size); // 1rem
        font-weight: settings.$bold;
        line-height: helpers.line-height-on-grid(settings.$root-font-size);
        text-align: left;
        @include helpers.ds_responsive-margin(2, bottom);
    }

    tbody,
    thead,
    tfoot {
        border: $table-border-width solid $table-border-colour;
    }

    tr {
        border-bottom: $table-border-width solid $table-border-colour--light;
    }

    tr > * {
        /// [1] compensate for table row 1px border
        padding: 0.5rem 1rem #{0.5rem - $table-border-width} 0.5rem; /// [1]
    }

    tr:last-child {
        //border-bottom-color: $table-border-colour;
        border-bottom: 0;
    }

    th {
        background-color: $table-header-background-colour;
        font-weight: settings.$bold;
        position: relative;
        text-align: left;

        @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, $table-header-background-colour, 'table header');
    }

    th,
    td {
        vertical-align: top;
    }

    th[colspan] {
        border: $table-border-width solid $table-border-colour;
    }

    th:not(:first-child)::before {
        border-left: $table-border-width solid $table-border-colour;
        bottom: 0.5rem;
        content: '';
        left: -01 * $table-border-width;
        position: absolute;
        top: 0.5rem;
    }

    thead > tr:last-child {
        border-bottom: 0;
    }

    tbody > tr > td {
        background-color: settings.$ds_colour__background--primary;
    }

    tbody > tr:nth-child(even) > td {
        background-color: $table-row-zebra-colour;

        @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, $table-row-zebra-colour, 'table zebra');
    }
}

@include helpers.ds_media-query(medium-down) {
    .ds_table.js-is-scrolling {
        &[data-smallscreen="scrolling"] {
            display: block;
            max-width: 100%;
            overflow-x: auto;
        }

        &[data-smallscreen="scrolling"] tr > :first-child {
            left: 0;
            position: sticky;
            z-index: 1;
        }

        &[data-smallscreen="scrolling"] caption {
            display: block;
            left: 0;
            position: sticky;
        }

        &[data-smallscreen="scrolling"] tr > :first-child::after {
            background: linear-gradient(90deg, rgba(0,0,0,0.07), rgba(0,0,0,0));
            content: '';
            height: 100%;
            position: absolute;
            right: -0.625rem; // -10px
            top: 0;
            width: $table-border-width;
        }

        &[data-smallscreen="scrolling"] tr > :first-child::before {
            background: $table-border-colour;
            content: '';
            height: 100%;
            left: -1 * $table-border-width;
            position: absolute;
            top: 0;
            width: $table-border-width;
        }

        &[data-smallscreen="scrolling"] tr > th:first-child {
            background: $table-header-background-colour;
        }

        &[data-smallscreen="scrolling"] tr > td:first-child {
            border-right: $table-border-width solid $table-header-background-colour;
        }
    }

    .js-enabled {
        .ds_table {
            &[data-smallscreen="boxes"] {
                border: 0;
                margin-bottom: 0;
            }

            &[data-smallscreen="boxes"] thead {
                @include helpers.ds_visually-hidden;
            }

            &[data-smallscreen="boxes"] tbody {
                border: none;
            }

            &[data-smallscreen="boxes"] tr {
                border: 0;
                display: block;
                margin-bottom: 1rem;
            }

            &[data-smallscreen="boxes"] tr > * {
                border: $table-border-width solid $table-border-colour;
                display: block;
                overflow: auto;
                padding-left: calc(50% - 0.5rem);
                position: relative;
            }

            &[data-smallscreen="boxes"] tr > td:not(:last-child) {
                border-bottom-color: $table-border-colour--light;
            }

            &[data-smallscreen="boxes"] tr > th:last-child {
                border-width: 0;
                margin-top: 2rem;
            }

            &[data-smallscreen="boxes"] tr > td:not(:first-child) {
                border-top-width: 0;
            }

            &[data-smallscreen="boxes"] tr > td::before {
                content: attr(data-heading);
                display: block;
                position: absolute;
                font-weight: settings.$bold;
                left: 0;
                margin-left: 1rem;
                margin-right: 1rem;
                text-align: left;
                width: calc(50% - 1rem);
            }

            &[data-smallscreen="boxes"] tr > td:first-child {
                box-shadow: inset 0 0.25rem 0 $table-border-colour--light;
                padding-top: 0.6875rem; // 11px
            }

            &[data-smallscreen="boxes"] tr > td:nth-child(odd) {
                background-color: settings.$ds_colour__background--primary;
            }

            &[data-smallscreen="boxes"] tr > td:nth-child(even) {
                background-color: $table-row-zebra-colour;
            }

        }
    }
}