.container-striped .row:nth-child(odd) {
    background-color: $table-striped-bg;
}

// Only needed for selecting all elements of a row
// https://stackoverflow.com/a/50734005/3984653
.grid-row {
    display: contents;
}

.grid-striped .grid-row {
    &:nth-of-type(even) > div {
        background-color: $table-striped-bg;
    }

    & > div {
        border-bottom: 1px solid $table-border-color;
    }
}

.lcr-left {
    flex: 1;
}
.lcr-center {
    flex: 5;
    text-align: center;
}
.lcr-right {
    flex: 1;
    text-align: right;
}


.col-question {
    position: relative;
    padding: 0.5rem 0.75rem 0;
    word-wrap: break-word;

    &.choice-error {
        font-weight: bold;
        color: $evap-dark-red;
    }

    @include media-breakpoint-up(lg) {
        padding-bottom: 0.5rem;
    }
}

.col-answer {
    padding: 0.5rem 0.75rem 0.9rem;

    @include media-breakpoint-up(lg) {
        padding-bottom: 0.5rem;
    }
}

.col-lg-broad {
    @include media-breakpoint-up(lg) {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

%table-grid {
    display: grid;
    min-height: 2.5rem;
    padding: 0.75rem;
    gap: 0.5rem 1rem;
    align-items: center;

    @at-root a#{&} {
        color: $black;
        &:hover {
            text-decoration: none;
        }
    }

    @include media-breakpoint-up(lg) {
        column-gap: 2rem;
    }
}

#results-grid > :not(:first-child) {
    border-top: calc(2 * $table-border-width) solid $table-border-color;

    @include media-breakpoint-up(lg) {
        border-top-width: $table-border-width;
    }
}

.results-grid-row {
    @extend %table-grid;

    grid:
        "name semester responsible voters result"
        / auto    6rem       12rem   10rem  11rem;

    @include media-breakpoint-down(lg) {
        grid:
            "name semester  responsible responsible"
            "name semester       voters      result"
            / auto    3rem         8rem       10rem;
    }

    @include media-breakpoint-down(md) {
        grid:
            "        name        name    semester"
            " responsible responsible responsible"
            "      voters      result      result"
            /         1fr         1fr        6rem;
    }

    &:not(.grid-header) [data-col=responsible] {
        font-style: italic;
    }

    [data-col=voters] {
        max-width: 10rem;
    }

    [data-col=result] {
        width: 100%;
        max-width: 11rem;
        justify-self: end;
    }

    &.course-row {
        padding-bottom: 0.2rem;
    }

    &.evaluation-row {
        padding: 0.5rem 0.75rem 0.5rem 2rem;
        font-size: 0.9rem;
        row-gap: 0.25rem;

        [data-col=name] {
            font-style: italic;
            color: $dark-gray;
        }
    }
}

.textanswer-review-grid {
    @extend %table-grid;

    gap: 0;
    grid:
        "answer edit review flag"
        / auto  min-content min-content min-content;

    min-height: 0;
    padding: 0.5rem;

    .grid-row > div {
        height: 100%;
        padding: 0.5rem;

        &:not(:first-child) {
            display: flex;
            align-items: center;
            padding-left: 0.75rem;
        }
    }
    .grid-row:not(:first-child) > div:not(:first-child) {
        justify-content: center;
    }
}

@each $col in name, semester, responsible, voters, result, answer, edit, review, flag {
    [data-col=#{$col}] {
        grid-area: $col;
    }
}

.col-order {
    position: relative;
    padding-left: 1em;
    cursor: pointer;

    &::before {
        position: absolute;
        bottom: -0.2rem;
        left: -0.1rem;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background-image: escape-svg($order-button-icon);
        background-repeat: no-repeat;
        background-size: 0.75rem;
    }

    &-asc::before {
        background-image: escape-svg($order-button-down-icon);
    }

    &-desc::before {
        background-image: escape-svg($order-button-up-icon);
    }
}

table th.col-order {
    padding-left: 1.4em;

    &:empty {
        padding-right: 0;
    }

    &::before, &::after {
        bottom: 0.3rem;
        left: 0.3rem;
    }
}

.grid-header {
    align-items: stretch;
    font-weight: bold;

    [data-col] {
        display: flex;
        align-items: flex-end;
    }
}

.infotext-edit-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0.5rem;
}
