//
// Mobile
// --------------------------------------------------

@if not $prev-mobile {
    /**
     * TODO: With Bootstrap 5, Mobile should be the default values
     * So we should move the values of this file to the default files.
     * And create a new _medium-devices.scss file to overwrite the values for larger screens
     * Or, instead of creating a new file, include the overwrites directly in the concerned SCSS files
     * See https://getbootstrap.com/docs/5.3/layout/breakpoints/#min-width
     */

    @include media-breakpoint-down(md) {

        :root {
            --hh-fixed-header-height: 105px;
        }

        #layout-content > .container {
            &, & > .row {
                --bs-gutter-x: 2px;
            }
        }

        // Layout Contents: Adjusting the contents to fit perfectly on mobile devices
        #layout-content {

            // Safari
            .table-responsive,
            .left-navigation .list-group {
                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                }

                &::-webkit-scrollbar:vertical {
                    width: 8px;
                }

                &::-webkit-scrollbar:horizontal {
                    height: 8px;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: rgba(0, 0, 0, .5);
                    border-radius: 10px;
                    border: 2px solid var(--hh-background-color-main);
                }

                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                    background-color: var(--hh-background-color-main);
                }
            }

            .panel {
                margin-bottom: 5px;

                .statistics {
                    .entry {
                        margin-left: 10px;
                    }
                }
            }

            .layout-nav-container {
                padding-left: 0;
                padding-right: 0;

                .panel-heading {
                    display: none;
                }
            }

            .panel-profile-header {
                #profilefileupload, .profile-user-photo-container, .space-acronym {
                    height: 100px !important;
                    width: 100px !important;
                }

                .profile-user-photo {
                    height: 95px !important;
                    width: 95px !important;
                }
            }

            .image-upload-container .image-upload-buttons {
                right: 2px !important;
            }


            // Space
            .panel-profile .panel-profile-header .img-profile-header-background {
                min-height: 80px !important;
            }

            .panel-profile .panel-profile-header .img-profile-data {
                padding-top: 50px !important;
                padding-left: 125px;
            }
        }

        .dropdown-menu {
            max-width: 320px;

            > li:not(.dropdown-header) a {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        select.form-control:not([multiple]) {
            padding-right: 23px;
            width: auto;
        }

        .modal.in {
            padding-right: 0 !important;
        }

        // STREAM
        .load-suppressed {
            margin-top: -8px;
            margin-bottom: 5px;
        }

        // Richtext
        .ProsemirrorEditor .ProseMirror-menuitem {
            font-size: 1.2em !important;
        }
    }
}