/**
 * This file contains the styles required to make the footer sticky.
 */

 html,
 body {
     height: 100%;
 }
 
 .stickyfooter {
     width: max-content;
     max-width: calc(100% - 40px);
     @include media-breakpoint-up(md) {
     height: $stickyfooter-height;
     bottom: calc(#{$stickyfooter-height} * -1);
     }
     @include media-breakpoint-between(xs,sm) {
     height: 162px;
     bottom: -200px;
     }
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     
     transition: all 350ms ease;
 
     background-color: $body-bg;
     border-top: none!important;
     left: 20px;
     right: 20px;
 
     border-radius: $btn-border-radius;
     box-shadow: $box-shadow-md;
     z-index: $zindex-fixed + 200;
 
     #page-grade-report-grader-index.path-grade &,
     #page-grade-export-ods-index.path-grade & {
         padding: 10px 0 0!important;
         bottom: 0;
         left: 0;
         right: 0;
         position: relative;
         box-shadow: none;
         background-color: transparent!important;
         z-index: 1;
 
         .col-md-9,
         .col-md-3 {
             flex: 0 0 100%;
             max-width: 100%;
         }
     }
 
     .theme-dark & {
         background-color: $dm-gray-100;
     }
 
     @include media-breakpoint-up(lg) {
     .drawer-open-index--open &,
     .drawer-open-left & {
         left: $drawer-width + $drawer-offscreen-gutter + 10px;
     }
     }
 
     div {
         margin-top: 0!important;
     }
 
     label {
         margin-bottom: 0;
 
         display: inline-flex;
         align-items: center;
         
         font-size: $font-size-sm;
     }
 
     select {
         margin-top: 0!important;
         margin-left: .5rem;
         padding: 2px 30px 2px 10px;
 
         height: 30px;
         font-size: $font-size-xs;
     }
 
     .col-auto {
         padding: 0!important;
     }
 
     .col:empty {
         display: none;
     }
 }
 
 .hasstickyfooter .stickyfooter {
     bottom: 20px;
 }
 
 @include media-breakpoint-up(sm) {
     #page-wrapper {
         height: 100%;
         display: flex;
         flex-direction: column;
         position: relative;
         #page {
             &:not(.drawers) {
                 flex: 1 0 auto;
             }
             display: flex;
             flex-direction: column;
             #page-content {
                 flex: 1 0 auto;
             }
         }
         #page-footer {
             flex-shrink: 0;
         }
     }
 }
 
 @include media-breakpoint-down(sm) {
     #page-wrapper {
         height: 100%;
         display: flex;
         flex-direction: column;
         #page {
             &:not(.drawers) {
                 flex: 1 0 auto;
             }
             display: flex;
             flex-direction: column;
         }
     }
 }
 
 .path-grade {
     #sticky-footer {
         padding: 9px!important;
         
         .btn-primary {
             padding: .6rem 1rem;
         }
     }
 }
 
 #sticky-footer .col + .col-auto {
     margin-left: 10px;
 }
 