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

.Sidebar {
    border-right: $border;
    border-bottom: $border;
    @include small-medium {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: $bg-color;
        z-index: 1000;
        text-align: center;
        overflow-y: scroll;
        padding: 0 0 $spacing * 2 0;
        &.Sidebar--hidden {
            @include sr-only;
        }
        &.Sidebar--shown {
            overflow: hidden;
            overflow-y: scroll;
            position: fixed;
        }
    }
}

.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;
    border-top: $border;
    border-bottom: $border;
    @include flex-center;
    padding: 5px 48px;
    svg {
        display: block;
    }
    @include small-medium {
        display: none;
    }
}

.Sidebar__Logo--mobile {
    // @include flex-center;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    border-bottom: $border;
    // height: 50px;
    .Sidebar__Logo__Inner {
        @include flex-center;
    }
    .Logo--simple {
        display: block;
    }
    @include large {
        display: none;
    }
}

.Sidebar__Logo__Link {
    @include disableUnderline;
}

.Sidebar__Close {
    margin: 0;
    padding: 0;
    button {
        background: none;
        cursor: pointer;
        border: none;
    }
    @include flex-center;
    @include large {
        display: none;
    }
    svg {
        stroke: $active-color;
    }
}

.Nav {
    @include small-medium {
        @include flex-center;
        flex-direction: column;
    }
}
.Nav__Page__Link {
    display: inline-block;
    white-space: nowrap;
    font-size: $medium-font;
    margin: 0 0 $spacing / 3 0;
}

.Nav__Page--lvl-1,
.Nav__Page--lvl-2 {
    .Nav__Page__Link {
        font-size: $smallish-font;
        @include font-regular;
        &,
        &:link,
        &:visited {
            color: $text-color;
        }
    }
}

.Nav__Page__Link--active {
    color: $greenDark !important;
    @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;
}
