@use '../_sass_variables' as *;

@media screen and (min-width: $breakpoint) {
    .layout-compact {
        .layout-topbar {
            .topbar-left {
                .horizontal-logo {
                    display: none;
                }

                .menu-button {
                    display: none;
                }

                .topbar-separator {
                    display: none;
                }
            }
        }

        .layout-sidebar {
            width: 5rem;
            overflow: visible;
            z-index: 999;

            .logo {
                margin: 0;
                justify-content: center;
            }

            .logo-image {
                margin-right: 0;
            }

            .app-name {
                display: none;
            }

            .layout-menu-container {
                overflow: auto;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .layout-menu {
            .menu-separator {
                display: none;
            }

            ul {
                display: none;
            }

            li.active-menuitem {
                > ul {
                    display: block;
                }
            }

            .layout-root-menuitem {
                margin-bottom: 1rem;
                border-radius: var(--border-radius);
                position: relative;

                > .layout-menuitem-root-text {
                    display: none;
                }

                > a {
                    display: block;
                    text-align: center;
                    border-radius: var(--border-radius);
                    padding: 0.5rem 0;
                    height: 2.75rem;
                    cursor: pointer;
                    outline: none;

                    .layout-submenu-toggler {
                        display: none;
                    }

                    .layout-menuitem-icon {
                        font-size: 1.25rem;
                        margin-top: 4px;
                    }

                    .layout-menuitem-text {
                        display: none;
                    }
                }

                > ul {
                    position: fixed;
                    left: 5.5rem;
                    top: auto;
                    transform: translateY(calc(-2.75rem + var(--menu-scroll-y, 0px)));
                    min-width: 15rem;
                    background: var(--popover-background);
                    border: 1px solid var(--popover-border-color);
                    box-shadow:
                        0px 56px 16px 0px rgba(0, 0, 0, 0),
                        0px 36px 14px 0px rgba(0, 0, 0, 0.01),
                        0px 20px 12px 0px rgba(0, 0, 0, 0.02),
                        0px 9px 9px 0px rgba(0, 0, 0, 0.03),
                        0px 2px 5px 0px rgba(0, 0, 0, 0.04);
                    border-radius: 1rem;
                    padding: 0.5rem;
                    max-height: 20rem;
                    overflow: auto;
                    .active-menuitem {
                        background-color: transparent !important;
                        > a {
                            color: var(--popover-item-active-text-color);
                        }
                    }
                    a {
                        color: var(--popover-item-text-color);
                        border-radius: 0.5rem;
                        margin: 0.25rem 0;

                        &.active-route {
                            color: var(--popover-item-active-route-text-color);
                        }
                        &:hover {
                            background-color: var(--popover-item-hover-background-color);
                        }
                    }
                }
            }
        }
    }
}
