.PageLayout--sidebar {
    overflow: hidden;
    height: 100vh;
}

.Sidebar {
    @include small-medium {
        &.Sidebar--hidden {
            @include sr-only;
        }
    }
}

.Sidebar__Fixed {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    @include small-medium {
        width: 100%;
    }
    @include large {
        width: $sidebar_width;
    }
}

.Sidebar__Inner {
    padding: $spacing * 1.5;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    @include small {
        padding-bottom: $spacing * 4;
    }
}

.Sidebar__Logo__Wrapper {
    margin: 0;
}

.Sidebar__Logo--desktop {
    margin: 0;
    @include flex-center;
    svg {
        display: block;
    }
    @include small-medium {
        display: none;
    }
}

.Sidebar__Logo--mobile {
    .Sidebar__Logo__Inner {
        @include flex-center;
    }
    .Logo--simple {
        display: block;
    }
}

.Nav {
    @include small-medium {
        @include flex-center;
        flex-direction: column;
    }
}

.Nav__Page--lvl-1,
.Nav__Page--lvl-2 {
    .Nav__Page__Link {
        font-size: $smallish-font;
        @include font-regular;
    }
}

.Nav__Page__Link._is-active {
    @include font-bold;
    span::before {
        content: '> ';
    }
    @include small-medium {
        span::after {
            content: ' <';
        }
    }
}

.Nav__SubPages {
    @include large {
        padding-left: $spacing;
        .Nav__Page & {
            display: none;
        }
        .Nav__Page--showChildren & {
            display: block;
        }
    }
}

.Nav__SubPages--lvl-1 {
    padding-left: $spacing;
    margin-bottom: $spacing * 0.5;
}

.Nav__SubPages--lvl-1:after {
    margin-left: $spacing * -1;
    font-size: $smallish-font;
    @include font-bold;
}
