.sidebarWrapper {
    @extend %fade_animation;

    z-index: var(--zindex-sidebar);

    .sidebarBrand, .sidebarOther {
        padding: em(16) em(32);
    }
}

.sidebarWrapper > .sidebar,
.sidebarWrapper > .sidebar-top,
.sidebarWrapper > .sidebar-bottom,
.sidebarWrapper > .sidebar-right {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    overflow-x: hidden;

    .sidebarLink {
        padding: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
    }

    .sidebarLink * {
        text-decoration: none;
        color: inherit;
        vertical-align: middle;
        cursor: pointer;
    }

    .sidebarLink .sidebarItem {
        padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
    }

    .sidebarLink .sidebarItem.active {
        background-color: var(--var-text-color);
        color: var(--var-bg-color);
    }

    .sidebarLink .sidebarItem:not(.active):hover {
        background-color: var(--overlay-color)
    }
}

.sidebar-right,
.sidebar {
    top: 0;
    width: var(--sidebar-min-width);
    height: 100%;
}

.sidebar-top,
.sidebar-bottom {
    left: 0;
    width: 100%;
    height: auto;
}

.sidebar {
    left: 0;
    transform: translateX(-100%);
}

.sidebar-right {
    right: 0;
    transform: translateX(100%);
}

.sidebar-top {
    top: 0;
    transform: translateY(-100%);
}

.sidebar-bottom {
    bottom: 0;
    transform: translateY(100%);
}

.sidebarWrapper.active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--overlay-color);

    > .sidebar,
    > .sidebar-top,
    > .sidebar-bottom,
    > .sidebar-right {
        transform: none !important;
        transition: transform $period-animation;
    }
}