@import "vars";

table {
    border-collapse: collapse;
    border-color: var(--border);
    border-style: solid;
    border-width: 0 0 1px 0;

    tr {
        &:nth-child(even) {
            background: var(--background);
        }
        &:nth-child(odd) {
            background: var(--background);
        }
    }

    th {
        background: var(--background);
        border-color: var(--border);
        border-style: solid;
        border-width: 1px 0;
        padding: 2px 6px;
    }

    &:not(.codehilitetable) td {
    	padding: 4px 6px;
    }

    /* Code fragments */
    &.codehilitetable {
        border: none;
        width: 100%;
/* This seems to be the only way to prevent the automatic table size
   algorithm from assigning extreme widths when content overflows.
   Fortunately the structure of the table is very simple, so we can afford to
   set a fixed width on line numbers and move on */
        table-layout: fixed;

        tr:nth-child(even),
        tr:nth-child(odd) {
            background: none;
        }

        td {
            padding: 0;

            &.linenos {
                width: 40px;
                text-align: right;
                span {
                    padding-right: 8px;
                }
            }
        }

        td.code,
        pre {
            margin: 0;
            width: 100%;
        }

        pre {
            overflow-x: auto;
        }
    }

    /* Forum and sub-forum listings */
    &.forumlist {
        border-collapse: separate;
        border-spacing: 0;
        margin: 16px 0;
        width: 100%;

        tr {
            background: unset;

            & > td:last-child,
            & > th:last-child {
                width: 20%; text-align: center;
            }

            &:nth-child(4n+2),
            &:nth-child(4n+3) {
                background: rgba(0, 0, 0, .05);
            }
        }
    }

    /* Topic table */
    &.topiclist {
        width: 100%;
        margin: auto;

        tr {
            & > *:nth-child(n+2) {
                /* This matches all children except the first column */
                text-align: center;
            }

            & > td:last-child,
            & > th:last-child {
                width: 20%; text-align: center;
            }
        }
    }

    /* Thread table */
    &.thread {
        width: 100%;
        border-width: 1px 0;

        &.topcomment {
            border: none;

            td.message {
                padding-top: 0;
            }

            div.info {
                padding-bottom: 4px;
            }
        }

        td {
            vertical-align: top;

            &.author {
                width: 256px;

                @media screen and (max-width: @small) {
                    /* Includes padding */
                    width: 136px;
                    overflow-wrap: anywhere;
                }

                @media screen and (max-width: @tiny) {
                    width: 104px;
                }
            }

            &.message {
                padding-top: 8px;

                & > *:nth-child(2) {
                    margin-top: 0;
                }

                img {
                    max-width: 100%;
                }
            }
        }

        &:not(.topcomment) div.info {
            float: right;
        }
        div.info {
            text-align: right;
            position: relative;

            @media screen and (max-width: @small) {
                float: none;
            }

            & > * {
                display: inline-block;
                vertical-align: top;
            }

            summary {
                list-style: none;
                cursor: pointer;
                user-select: none;
            }
        }

        .topcomment-placeholder div {
            font-style: italic;
            opacity: 0.5;
            padding: 8px 0;
        }

        .context-menu {
            position: absolute;
            right: 0;
            top: 100%;
            margin: 0;
            padding: 4px 0;
            box-shadow: var(--shadow);
            border-radius: 4px;
            transition: none;

            background: var(--background);
            z-index: 2;
            border: 1px solid var(--border);

            a {
                display: block;
                padding: 4px 8px;
                text-align: center;
                color: inherit;

                &:hover {
                    background: var(--background-light);
                    text-decoration: none;
                }
            }
        }
    }

    /* Tables with filters */
    &.filter-target th:after {
        content: attr(data-filter);
        display: block;
        font-size: 80%;
        font-family: monospace;
        font-weight: normal;
    }
}
