@import "~theme/globals";

// @todo darkmode
// @todo RTL layout

:host-context(ion-app.md) {
    --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
}

:host-context(ion-app.ios) {
    --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
}

.core-grades-table {
    border-collapse: collapse;
    line-height: 20px;
    width: 100%;
    font-size: 16px;
    color: var(--ion-text-color);

    // @include darkmode() {
    //   color: $core-dark-text-color;
    // }

    tr {
        border-bottom: 1px solid var(--border-color);
    }

    th, td {
        padding: 10px 0 10px 10px;
        vertical-align: top;
        white-space: normal;
        text-align: start;
    }

    thead th {
        vertical-align: bottom;
        font-weight: bold;
        background-color: var(--white);

    //   @include darkmode() {
    //     background-color: $black;
    //   }
    }

    tbody th {
      font-weight: normal;
    }

    #gradeitem {
        padding-left: 5px;
    }

    .core-grades-table-gradeitem {
        padding-left: 5px;
        font-weight: bold;

        &.column-itemname {
            padding-left: 0;
        }

        img {
            width: 16px;
            height: 16px;
        }

        ion-icon {
            color: #999999;
        }

        span {
            margin-left: 5px;
        }

    }

    .core-grades-table-feedback {
        padding-left: 5px;

        .no-overflow {
            overflow: auto;
        }

    }

    .dimmed_text,
    .hidden {
        opacity: .7;
    }

    .odd {

        td, th, th[aria-current="page"] {
            background-color: var(--gray-lighter);

            // @include darkmode() {
            //     background-color: $gray-darker;
            // }
        }

    }

    .even {

        td, th, th[aria-current="page"] {
            background-color: var(--white);

            // @include darkmode() {
            //     background-color: $black;
            // }
        }

    }

    .core-grades-grade-clickable {
        cursor: pointer;
    }

}

core-split-view.nested .core-grades-table .ion-hide-md-down,
core-split-view.menu-and-content .core-grades-table .ion-hide-md-down {
    display: none;
    opacity: 0;
}

@include media-breakpoint-down(md) {

    .core-grades-table td {
        font-size: 0.85em;
    }

}
