.tablematrix {
    position: relative;
    z-index: 1;

    tr {
        &.standard {
            background: scale-color($table-accent-bg, $lightness: -2%) !important;

            cursor: pointer;
        }
    }

    tr.table-pager,
    tr.pages {
        background-color: $body-bg;
    }
    tr.table-pager div.progress-help {
        font-weight: normal !important;
        width: 9rem;
        text-align: center;
        margin: auto;
    }
    th.viewtab {
        text-align: center;
        max-width: 4.375rem; // 70px;
    }

    td {
        &.mid {
            text-align: center;
            vertical-align: middle;
            .icon {
                display: block;
                font-size: $font-size-base * 1.25;
                cursor: pointer;
                &.begun {
                    color: $assessment-begun-color;
                }
                &.incomplete {
                    color: $assessment-incomplete-color;
                }
                &.partial {
                    color: $assessment-partial-color;
                }
                &.completed {
                    color: $assessment-completed-color;
                }
                &.dot {
                    font-size: $font-size-base * 0.75;
                    color: scale-color($gray-300, $lightness: 28%);
                }
                &.dot.disabled {
                    font-size: $font-size-base;
                    color: scale-color($gray-300, $lightness: 28%);
                    cursor: $cursor-disabled;
                    // Override dot icon with minus icon
                    &:before {
                        content: "\f068";
                    }
                }
            }
        }

        &.code {
            width: 20%;
        }

        &.special {
            border-top: 0;
        }

        .btn.next {
            float: right;
        }
    }

    // Additional styles extending popover
    .matrixtooltip {
        @extend .text-small;
        display: inline-block !important;
        min-width: 180px;
        left: auto;
        top: auto;
        .popover-title {
            font-size: $h6-font-size;
            font-weight: $headings-font-weight;
            line-height: $headings-line-height;
            margin: 0;
            padding: $popover-header-padding-y $popover-header-padding-x;
            background-color: $popover-header-bg;
            border-bottom: $popover-border-width solid scale-color($popover-header-bg, $lightness: -5%);
            border-radius: $popover-border-radius $popover-border-radius 0 0;
        }
        .popover-content {
            padding: $popover-body-padding-y $popover-body-padding-x;
            ol,
            ul {
                padding-left: $spacing-lg;
            }
            h2, h3, h4, h5 {
              font-size: $h6-font-size;
            }
        }
    }

    // Styles for cell hover crosshair
    // Make tbody display table to clip the crosshair
    // Set tablematrix position relative so that tooltip does not get cropped.
    tbody {
        overflow: hidden;
        display: table;
        align-content: stretch;
        width: 100%;
        .mid {
            position: relative;

            &:hover .dot {
                color: $theme-text-midtone-color;
            }

            &:hover:before,
            &:hover:after {
                content: "";
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: -1;
                background-color: rgba(0,0,0,.05);
            }

            &:hover:before {
                top: -99999px;
                left: 0;
            }

            &:hover:after {
                top: 0;
                left: -99999px;
            }
        }
    }
    .matrixindent {
        display: inline-block;
    }
    $matrix-slug: matrixlevel !default;
    @for $i from 1 through 5 {
        .#{$matrix-slug}#{$i} .matrixindent {
            padding-left: $spacing-sm * $i;
        }
    }

    .matrixsumrow {
        &.bottom-row {
            background-color: $table-accent-bg;
            td {
                border-top: $table-border-width-heavy solid $table-border-color;
                border-bottom: 0;
            }
        }
    }
}
.assessment {
    color: $theme-text-color;

    .assessmentfeedback {
        &.begun {
            color: $assessment-begun-color;
        }
        &.incomplete {
            color: $assessment-incomplete-color;
        }
        &.partial {
            color: $assessment-partial-color;
        }
        &.completed {
            color: $assessment-completed-color;
        }
    }
}

.shortname-container {
    cursor: pointer;
}

td.completedcount {
    vertical-align: middle !important;
    padding-left: 0.0625rem !important; // 1px
    padding-right: 0.0625rem !important; // 1px
}

th.statusheader {
    vertical-align: middle !important;
    padding-left: 0.0625rem !important; // 1px
    padding-right: 0.0625rem !important; // 1px
}

div.statusheader{
    .icon {
        padding-left: 0.5rem; // 8px;
        padding-right: 0.5rem; // 8px;
    }
}

div.statusheader,
th.statusheader,
div.toolbarhtml {
    .icon {
        font-size: $font-size-base * 1.25;
        &.begun {
            color: $assessment-begun-color;
        }
        &.incomplete {
            color: $assessment-incomplete-color;
        }
        &.partial {
            color: $assessment-partial-color;
        }
        &.completed {
            color: $assessment-completed-color;
        }
        &.dot {
            font-size: $font-size-base * 0.75;
            color: scale-color($gray-300, $lightness: 28%);
        }
        &.dot.disabled {
            font-size: $font-size-base;
            color: scale-color($gray-300, $lightness: 28%);
            cursor: $cursor-disabled;
            // Override dot icon with minus icon
            &:before {
                content: "\f068";
            }
        }
    }
}

th.smartevidencedash, td.smartevidencedash {
    padding: 0 !important;
    vertical-align: middle !important;
}

.statusheader,
.completedcount {
  // Pick the screen size you want it might be $screen-md-min.
  @include media-breakpoint-up(md) {
    // adjust pixel value
    max-width: 0.875rem; // 14px;
  }
}
.smartevidencedash {
  // Pick the screen size you want it might be $screen-md-min.
  // might not need media query because you might want to force the dash cell to be all the same.
  @include media-breakpoint-up(md) {
    // adjust pixel value
    max-width: $spacing-xs;
  }
}

div.pseudolabel {
    @include media-breakpoint-up(md) {
        min-width: 16.5625rem !important; // 265px !important;
    }
}
