// Fonts
// @import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// Material Design
// @import "material-components-web/material-components-web";
@import "@material/typography/mdc-typography";
@import "@material/layout-grid/mdc-layout-grid";
@import "@material/elevation/mdc-elevation";
@import "@material/button/mdc-button";
@import "@material/icon-button/mdc-icon-button";
@import "@material/checkbox/mdc-checkbox";
@import "@material/card/mdc-card";
@import "@material/select/mdc-select";
@import "@material/list/mdc-list";
@import "@material/textfield/mdc-text-field";
@import "@material/textfield/helper-text/mdc-text-field-helper-text";
@import "@material/data-table/mdc-data-table";

body {
    padding-top: 80px;
    overflow-x: hidden;
}

/* Rules for sizing the icon. */
.material-icons {
    .md-18 {
        font-size: 18px;
    }
    .md-24 {
        font-size: 24px;
    }
    .md-36 {
        font-size: 36px;
    }
    .md-48 {
        font-size: 48px;
    }
}

.landing-page-grid {
    // @include mdc-layout-grid-inner('desktop', 10vw, 32px);
    @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
        width: 80%;
        margin: auto 10%;
    }
    text-align: center;
    * {
        margin: 8px;
    }
}
.dashboard-grid {
    @media screen and (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
        width: 80%;
        margin: auto 10%;
    }
    text-align: center;
}

// MDC card media
#home-button-course {
    background-image: url("/images/course_1312478.png");
}
#home-button-professor {
    background-image: url("/images/chalkboard-teacher-solid.png");
}
#home-button-dashboard {
    background-image: url("/images/file-alt-regular.png");
}
#dash-button-csv {
    background-image: url("/images/file-csv.png");
}
#dash-button-schedule {
    background-image: url("/images/calendar-alt.png");
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

.center-text {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

// Fixes column headers in place
// Apply to table wrapper
.table-fixed-col-head {
    overflow-y: scroll;
    table thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background: white;
    }
}

// Fixes row headers in place
// Apply to table wrapper
.table-fixed-row-head {
    overflow-x: scroll;
    table tbody th {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: white;
    }
    table thead th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
    }
}

.mdc-data-table {
    th {
        font-weight: bold;
    }
    .mdc-button {
        position: inherit;
    }
    .mdc-icon-button {
        position: inherit;
    }
}
.mdc-data-table__header-cell {
    font-weight: bold;
}

.table--fit-screen {
    height: 80vh;
    width: 96vw;
}

.course-sections-table {
    @include mdc-data-table-column-widths(10% 10% 40% 10% 10% 10%);
}

.ellipsis {
    @include mdc-typography-overflow-ellipsis;
}

#edit-course-btn {
    position: sticky;
    right: 0;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > a:after {
    content: "\f0da";
    float: right;
    border: none;
    font-family: "FontAwesome";
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
}

[onclick] {
    cursor: pointer;
}

[id|="delete-confirm"] {
    padding-top: 4px;
}

h1 {
    @include mdc-typography(headline1);
    font-size: 4.25rem;
}
h2 {
    @include mdc-typography(headline2);
}
h3 {
    @include mdc-typography(headline3);
}
h4 {
    @include mdc-typography(headline4);
}
h5 {
    @include mdc-typography(headline5);
}
h6 {
    @include mdc-typography(headline6);
}
button {
    @include mdc-typography(button);
}
p {
    @include mdc-typography(body1);
}