/* Tables
   ========================================================================== */

/**
 * 1. Make sure list tables clear any preceeding grid cell floats.
 * 2. Allow overflow scroll on tables.
 *
 * Example HTML:
 *
 * <div class="txp-listtables">
 *     <table></table>
 * </div>
 */

.txp-listtables {
    /* 1 */
    clear: both;
    /* 2 */
    overflow-x: auto;

    &:focus {
        outline: thin solid $color-link-focus;
    }
}

@include dark-mode {
    .txp-listtables:focus {
        outline: thin solid $dark-color-link-focus;
    }
}

/**
 * Consistent tables.
 */

table {
    border-spacing: 0;
    border-collapse: collapse;
    background-color: $color-background;
}

@include dark-mode {
    table {
        background-color: $dark-color-background;
    }
}

/**
 * Styling of table captions.
 */

caption {
    margin-bottom: 0.5em;
    text-align: left;
}

/**
 * Swap caption alignment in RTL languages.
 */

[dir="rtl"] caption {
    text-align: right;
}

/**
 * Table row borders.
 */

tr {
    border: 1px solid $color-border-light;
}

thead th {
    background-color: $color-gradient-from;
}

@include dark-mode {
    tr {
        border-color: $dark-color-border-extra-light;
    }

    thead th {
        background-color: $dark-color-gradient-from;
        color: $dark-color-text-heading;
    }
}

/**
 * Make table cells align centred and left by default.
 */

th,
td {
    padding: 0.38461538461538em 1em; // 5px / 13px + 13px
    vertical-align: middle;
    text-align: left;
}

/**
 * Swap table cell text alignments in RTL languages.
 */

[dir="rtl"] {
    th,
    td {
        text-align: right;
    }
}

/**
 * Listing tables.
 *
 * Example HTML:
 *
 * <table class="txp-list">
 *     <thead>
 *         <tr>
 *             <th class="multi-edit" scope="col"></th>
 *             <th class="asc scope="col"><a></a></th>
 *             <th scope="col"><a></a></th>
 *         </tr>
 *     </thead>
 *     <tfoot>
 *         <tr>
 *             <td colspan="3"></td>
 *         </tr>
 *     </tfoot>
 *     <tbody>
 *         <tr>
 *             <th class="multi-edit" scope="row"></th>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *         <tr class="selected">
 *             <th class="multi-edit" scope="row"></th>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.txp-list,
.txp-list--no-options {
    width: 100%;

    tbody {
        tr {
            &:nth-child(even) {
                background: $color-background-box;
            }

            &.selected {
                background: $color-selected;
            }
        }

        th {
            font-weight: normal;
        }
    }

    thead th {
        @include gradient-linear($color-gradient-from, $color-gradient-to);

        border-top: 1px solid $color-border-light;
        border-right: 1px solid $color-border;
        border-bottom: 1px solid $color-border-dark;
        border-left: 0;

        &:first-child {
            border-left: 1px solid $color-border;
        }

        a {
            display: block;
            position: relative;
            margin: -0.38461538461538em -1em; // improved click area
            padding: 0.38461538461538em 1em; // 5px / 13px + 13px
            color: $color-text;

            &:hover {
                color: $color-text;
                text-decoration: none;
            }
        }
    }
}

@include dark-mode {
    .txp-list,
    .txp-list--no-options {
        tbody {
            tr {
                &:nth-child(even) {
                    background: $dark-color-background-box;
                }

                &.selected {
                    background: $dark-color-selected;
                }
            }
        }

        thead th {
            @include gradient-linear($dark-color-gradient-to, $dark-color-gradient-from);

            border-top-color: $dark-color-border-light;
            border-right-color: $dark-color-border-dark;
            border-bottom-color: $dark-color-border-extra-light;

            &:first-child {
                border-left-color: $dark-color-border-extra-light;
            }

            &:last-child {
                border-right-color: $dark-color-border-extra-light;
            }

            a {
                color: $dark-color-text-heading;

                &:hover {
                    color: $dark-color-text-heading;
                }
            }
        }
    }
}

/**
 * Backgrounds and indicator icons on currently active sortable `thead th`.
 *
 * Example HTML:
 *
 * <th class="asc scope="col"><a></a></th>
 * <th class="desc scope="col"><a></a></th>
 */

.txp-list,
.txp-list--no-options {
    thead th {
        &.asc,
        &.desc {
            @include gradient-linear(darken($color-gradient-to, 4%), darken($color-gradient-from, 4%));

            a::after {
                @include hide-text;

                display: block;
                position: absolute;
                z-index: 10;
                top: 45%;
                right: 0.3125em; // 5px / 16px
                width: 0;
                height: 0;
                opacity: 0.5;
                font-size: 16px;

                [dir="rtl"] & {
                    right: auto;
                    left: 0.3125em; // 5px / 16px
                }
            }

            a:hover::after {
                opacity: 1;
            }
        }

        &.desc a::after {
            content: "\2193";
            border: 0 solid transparent;
            border-width: 0.25em 0.25em 0;
            border-top-color: $color-text;
        }

        &.asc a::after {
            content: "\2191";
            border: 0 solid transparent;
            border-width: 0 0.25em 0.25em;
            border-bottom-color: $color-text;
        }
    }
}

@include dark-mode {
    .txp-list,
    .txp-list--no-options {
        thead th {
            &.asc,
            &.desc {
                @include gradient-linear(darken($dark-color-gradient-from, 4%), darken($dark-color-gradient-to, 4%));

                a::after {
                    opacity: 0.6;
                }

                a:hover::after {
                    opacity: 1;
                }
            }

            &.desc a::after {
                border-top-color: $dark-color-text;
            }

            &.asc a::after {
                border-bottom-color: $dark-color-text;
            }
        }
    }
}

/**
 * Consistent width for table multi-edit checkbox columns.
 */

.txp-list-col-multi-edit {
    width: 13px;
}

/**
 * Avoid wrapping of content in table '#ID' columns.
 */

.txp-list-col-id {
    white-space: nowrap;
}