.sidebar-wrapper {
    @extend %fade_animation;

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

    .sidebar-brand, .sidebar-other {
        padding: em(16) em(32);
    }
}

.sidebar-wrapper > .sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    overflow-x: hidden;

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

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

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

    .sidebar-link .sidebar-item.active {
        background-color: var(--var-text-color);
        color: var(--var-bg-color);
    }

    .sidebar-link .sidebar-item:not(.active):hover {
        background-color: var(--overlay-color)
    }
}

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

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

.sidebar:not(.with-right):not(.with-top):not(.with-bottom) {
    left: 0;
    transform: translateX(-100%);
}

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

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

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

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

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