@import "~theme/globals";

:host {
    --header-background: var(--white);
    --odd-cell-background: var(--light);
    --odd-cell-hover: var(--gray-200);
    --even-cell-background: var(--white);
    --even-cell-hover: var(--light);
    --icon-color: var(--gray-500);
    --border-color: var(--stroke);
    --mod-icon-filter: brightness(0);

    .odd {
        --cell-background: var(--odd-cell-background);
        --cell-hover: var(--odd-cell-hover);
    }

    .even {
        --cell-background: var(--even-cell-background);
        --cell-hover: var(--even-cell-hover);
    }

}

:host-context(html.dark) {
    --header-background: var(--gray-900);
    --odd-cell-background: var(--gray-800);
    --odd-cell-hover: var(--gray-600);
    --even-cell-background: var(--gray-900);
    --even-cell-hover: var(--gray-700);
    --icon-color: var(--gray-200);
    --mod-icon-filter: brightness(0) invert(1);
}

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

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

    th, td {
        @include padding(8px, 8px, 8px, null);
        vertical-align: top;
        white-space: normal;
        text-align: start;
    }

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

    thead #gradeitem {
        @include padding(null, null, null, 24px);
    }

    tbody th {
      font-weight: normal;
    }

    tbody tr.core-bold th {
      font-weight: inherit;
    }

    tbody #gradeitem {
        @include padding(null, null, null, 4px);
    }

    .core-grades-table-gradeitem {
        @include padding(null, null, null, 4px);
        font-weight: bold;

        &.column-itemname {
            @include padding(null, null, null, 0);
        }

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

        core-mod-icon {
            padding: 0px;
            --size: 16px;
            background: transparent;
            --filter: var(--mod-icon-filter);
        }


        ion-icon {
            color: var(--icon-color);
        }

        span {
            @include margin(null, null, null, 4px);
        }

        .expandable-status-icon {
            font-size: var(--text-size);
            @include margin-horizontal(0, 2px);
            @include core-transition(transform, 200ms);

            &.expandable-status-icon-expanded {
                transform: var(--rotate-expandable);
            }
        }

    }

    .core-grades-table-feedback {
        @include padding(null, null, null, 4px);

        .no-overflow {
            overflow: auto;
        }

    }

    .core-grades-table-grade {
        ion-icon {
            @include padding(null, 4px, null, null);
        }
    }

    .core-grades-table-leader {
        width: 0;
    }

    .ion-no-border {
        border: 0 !important;
    }

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

    .odd, .even {
        td, th, th[aria-current="page"] {
            background-color: var(--cell-background);
        }
    }

    .core-grades-grade-clickable {
        cursor: pointer;
        &:hover {
            td, th, th[aria-current="page"] {
                background-color: var(--cell-hover);
            }
        }

        th, td {
            height: var(--a11y-min-target-size);
            vertical-align: middle;
        }
    }

    ion-list, ion-item::part(native) {
        background-color: transparent;
    }

    &.summary .ion-hide-md-down {
        display: none;
        opacity: 0;
    }

}

@include media-breakpoint-down(md) {

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

}
