@use '../_sass_variables' as *;

.layout-sidebar {
    margin-left: 0;
    width: 17rem;
    height: 100%;
    border-radius: 0 1.5rem 1.5rem 0;
    overflow: hidden;
    box-shadow: $sidebarShadow;
    display: flex;
    flex-direction: column;
    user-select: none;
    transition:
        margin 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);

    .sidebar-header {
        min-height: 4rem;
        height: 4rem;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
    }

    .logo {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: 0 none;
        padding: 0;
        width: 100%;
        min-height: 2.5rem;
        transition:
            background-color var(--transition-duration),
            box-shadow var(--transition-duration);
    }

    .logo-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        vertical-align: middle;
    }

    .app-name {
        vertical-align: middle;
        font-size: 1.5rem;
        letter-spacing: 0.2px;
    }
}

.layout-menu-container {
    overflow: auto;
    flex: 1;
    padding: 1rem;
}

.layout-content {
    .layout-breadcrumb {
        display: none;
    }
}
.layout-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .menu-separator {
        margin: 0.875rem 0;
    }

    .layout-root-menuitem {
        > .layout-menuitem-root-text {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0.05rem;
            padding: 0rem 0 0.5rem 0;
        }

        > a {
            display: none;
        }

        /* Root items that are direct links (Dashboard, Bedrijven, Settings) – show the link as button */
        &.layout-menuitem-root-link > a {
            display: flex !important;
            align-items: center;
            position: relative;
            font-weight: 500 !important;
            padding: 0.45rem 0.75rem;
            border-radius: var(--border-radius);
            box-shadow: none !important;
            cursor: pointer;
            transition: box-shadow var(--transition-duration);

            .layout-menuitem-icon {
                margin-right: 0.5rem;
            }
        }

        /* Hide label when sidebar is collapsed / subsidebar visible */
        .hidden-when-collapsed {
            opacity: 0;
            overflow: hidden;
            width: 0;
            white-space: nowrap;
        }

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

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        a {
            display: flex;
            align-items: center;
            position: relative;
            font-weight: 500 !important;
            padding: 0.45rem 0.75rem;
            border-radius: var(--border-radius);
            box-shadow: none !important;
            cursor: pointer;
            transition: box-shadow var(--transition-duration);

            .layout-menuitem-icon {
                margin-right: 0.5rem;
            }

            .layout-submenu-toggler {
                font-size: 75%;
                margin-left: auto;
                transition: transform var(--transition-duration);
            }
        }

        li {
            &.active-menuitem {
                border-radius: var(--border-radius);

                > a {
                    .layout-submenu-toggler {
                        transform: rotate(-180deg);
                    }
                }
                > ul {
                    max-height: 1000px;
                    transition: max-height 1s ease-in-out;
                }
            }
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
            border-radius: var(--border-radius);
            max-height: 0;
            transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1);

            li {
                a {
                    padding-left: 1.5rem;
                }

                li {
                    a {
                        padding-left: 2.5rem;
                    }

                    li {
                        a {
                            padding-left: 3.5rem;
                        }

                        li {
                            a {
                                padding-left: 4.5rem;
                            }

                            li {
                                a {
                                    padding-left: 5.5rem;
                                }

                                li {
                                    a {
                                        padding-left: 6.5rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
