/**
 * 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;
    
    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;

    .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;
        font-size: $font-size-sm;
    }

    select {
        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 {
        width: max-content;
        max-width: max-content;
        padding: 10px 10px 10px 20px!important;
    }
}

#sticky-footer .col-auto .btn {
    margin-left: 10px;
}