//
//  Aside mobile styles
//  ____________________________________________

//
//  Variables
//  --------------------------------------------

@amblog-close-button__size: 18px;

//
//  Common
//  --------------------------------------------

& when (@media-common = true) {
    .amblog-aside-right,
    .amblog-aside-left {
        & {
            background: @color-white;
            box-shadow: 0 4px 8px rgba(0, 98, 176, .1);
            display: none;
            height: ~'calc(100% - 20px)';
            overflow-y: scroll;
            padding-top: @amblog__indent__xl;
            position: fixed;
            top: 0;
            width: 300px;
            z-index: @amblog-z-index__alpha;
        }

        &.active {
            display: block;
        }

        .aside-title {
            margin: 20px 20px 40px;
            position: relative;
        }

        .amblog-close {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .amblog-close:after {
            .lib-css(background, @amblog-close__background-image);

            content: '';
            display: block;
            height: @amblog-close-button__size;
            width: @amblog-close-button__size;
        }

        h3.amblog-title {
            padding-right: 50px;
        }
    }

    .amblog-aside-right {
        right: 0;
    }

    .amblog-aside-left {
        left: 0;
    }
}
