.sidebar-overlay{
    @extend %overlay;
    display: flex;
    justify-content: flex-end;

    &.open{
        .sidebar-outer{
            animation: slide-right-in-transition;
            animation-duration: 0.4s;
            animation-delay: 0.2s;
            animation-fill-mode: both;
        }
    }
}

.sidebar-outer{
    width: 35%;
    max-width: 42rem;
    height: 100%;
    box-shadow: 0 0 2.1rem -0.4rem #626262;
    background: $color-snow;
    display: flex;
    flex-direction: column;
    animation: slide-right-out-transition;
    animation-duration: 0.4s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    @include grid-container();
}

.sidebar-outer-header {
    @extend %sidebar-header;
}

.sidebar-outer-main{
    width: 100%;
    height: calc(100% - 5.8rem);
}

