
.paw-mobile-menu-bar-container {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: $mobile-menu-color;
    z-index: 10;
    display: none;

    @include box-shadow(0px, -3px, 5px, 0px, $mobile-menu-shadow-color);

    .paw-mobile-menu-bar-holder {
        position: relative;
        height: 100%;

        .paw-mobile-menu-bar {
            position: absolute;
            width: 100%;
            height: 100%;


            .paw-mobile-menu-bar-btn-holder {
                width: 50px;
                min-width: 50px;
                max-width: 50px;
                width: 50px;

                button.paw-btn-mobile-menu-bar {
                    width: 100%;
                    height: 100%;
                    background: none;
                    border: none;
                }
            }

            ul.paw-mobile-menu-bar-items {
                width: 100%;
                height: 100%;
                flex-wrap: nowrap;
                list-style: none;
                margin: 0;
                padding: 0;

                li.paw-mobile-menu-bar-item {
                    min-width: 50px;
                    max-width: 50px;
                    width: 50px;
                    color: $main-text-color;

                    > a {
                        display: flex;
                        flex-direction: column;
                        height: 100%;
                        width: 100%;
                        justify-content: center;
                        justify-items: center;
                        text-align: center;
                        color: inherit;
                    }

                    &.active {
                        color: $accent-color;
                    }

                    &.paw-mobile-menu-item-mock {
                        display: flex;
                        height: 100%;
                        width: 100%;
                        justify-content: center;
                        justify-items: center;
                        text-align: center;

                        .paw-mobile-menu-item-mock-icon {
                            background: #e7e7e7;
                            display: block;
                            width: 18px;
                            height: 6px;
                            align-self: center;
                        }
                    }
                }
            }

            .paw-mobile-menu-active-bar {
                height: 2px;
                background: $accent-color;
                width: 14px;
                position: absolute;
                bottom: 0;
                left: 0;
                margin-left: 18px;
                opacity: 0;
            }
        }
    }
}

.paw-mobile-menu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 9999;


    .paw-mobile-menu {
        position: absolute;
        background: $mobile-menu-color;
        width: 100%;
        bottom: 0;

        .paw-mobile-menu-header {
            border-bottom: 1px solid $mobile-menu-border-color;

            button.paw-btn-mobile-menu-back {
                background: none;
                border: none;
                padding: 16px 24px;
                color: $gray-color;
            }

            span {
                font-weight: 500;
            }
        }

        ul.paw-mobile-menu-items {
            list-style: none;
            margin: 0;
            padding: 0;

            li.paw-mobile-menu-item {
                padding: 16px 24px;

                a {
                    color: $main-text-color;

                    i {
                        color: $gray-color;

                        &.paw-mobile-menu-item-icon {
                            margin-right: 24px;
                        }
                    }
                }

                &:last-child {
                    border-bottom: none;
                }

                &.active a {
                    color: $accent-color;

                    i {
                        color: inherit;
                    }
                }
            }

            li.ui-sortable-placeholder {
                height: 51px;
            }

            li.menu-sort-item-selected:not(.menu-item-issorting) {
                opacity: 0.5;
            }
        }

        .paw-mobile-menu-footer {
            height: 60px;
            text-align: center;
            z-index: 1;

            @include box-shadow(0px, -3px, 5px, 0px, $mobile-menu-shadow-color);

            button {
                width: 60px;
                height: 100%;
                background: none;
                border: none;
            }
        }

        &.paw-mobile-menu-top-level {
            ul.paw-mobile-menu-items li.paw-mobile-menu-item {
                border-bottom: 1px solid $mobile-menu-border-color;
            }
        }
    }
}

@media only screen and (min-device-width: $min-screen-sm) and (max-device-width: $max-screen-sm) {
    .paw-mobile-menu-bar-container {
        display: block;
    }
}


@media only screen and (max-width: $max-screen-xs) {
    .paw-mobile-menu-bar-container {
        display: block;
    }
}