
// Header Side

.header-wrapper.header-side-nav {
    #header {
        .side-top {
            display: block;
            text-align: center;
            @include clearfix;

            > .container {
                display: block;
                min-height: 0 !important;
                position: static;
                padding-top: 0;
                padding-bottom: 0;

                > * {
                    display: inline-block;
                    padding: 0 !important;
                }

                > *:first-child {
                    margin-left: 0;
                    margin-right: 0;
                }
            }
        }

        .share-links {
            margin: 0 0 8px;

            a {
                width: 30px;
                height: 30px;
                margin: 5px;
                box-shadow: none;
                border-radius: 50px;

                &:hover {
                    color: #fff;
                }
            }

            .share-twitter:hover { background: #1aa9e1; }
            .share-facebook:hover { background: #3b5a9a; }
            .share-linkedin:hover { background: #0073b2; }
            .share-rss:hover { background: #ff8201; }
            .share-googleplus:hover { background: #dd4b39; }
            .share-pinterest:hover { background: #cc2127; }
            .share-youtube:hover { background: #c3191e; }
            .share-instagram:hover { background: #7c4a3a; }
            .share-skype:hover { background: #00b0f6; }
            .share-email:hover { background: #dd4b39; }
            .share-vk:hover { background: #6383a8; }
            .share-xing:hover { background: #1a7576; }
            .share-tumblr:hover { background: #304e6c; }
            .share-reddit:hover { background: #ff4107; }
            .share-vimeo:hover { background: #52b8ea; }
            .share-telegram:hover { background: #0088cc; }
            .share-yelp:hover { background: #c41200; }
            .share-flickr:hover { background: #0063DC; }
            .share-whatsapp:hover { background: #3c8a38; }
        }
    }
}
@media (min-width: 992px) {
    .header-wrapper.header-side-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1002;

        #header {
            position: fixed;
            top: 0;
            #{$left}: 0;
            width: 256px;
            min-height: 100vh;
            padding: 10px 15px 145px;

            &.initialize {
                position: absolute;
            }

            &.fixed-bottom {
                position: fixed;
                bottom: 0;
                top: auto;
            }

            .side-top {
                > .container {
                    padding: 0;
                    width: 100%;
                }
            }

            .header-main {
                position: static;
                background: transparent;

                > .container {
                    position: static;
                    padding: 0;
                    width: 100%;
                    display: block;

                    > * {
                        position: static;
                        display: block;
                        padding: 0;
                    }
                }
            }

            .logo {
                text-align: center;
                margin: 30px auto;
            }

            .searchform {
                margin-bottom: 20px;
                width: 226px;
                border-radius: $border-normal;

                input {
                    padding: 0 10px;
                    border-radius: corner-values($border-normal 0 0 $border-normal);
                    border-width: 0;
                    width: 190px;
                }
                &.searchform-cats {
                    input {
                        width: 95px;
                    }
                }
                button {
                    padding: 0 10px;
                    border-radius: corner-values(0 $border-normal $border-normal 0);
                }
                select {
                    border-width: 0;
                    padding: 0 5px;
                    width: 93px;
                }
                .selectric-cat {
                    width: 93px;
                }
                .selectric {
                    border-width: 0;
                    .label {
                        padding: 0 5px;
                    }
                }

                .autocomplete-suggestions {
                    left: -1px;
                    right: -1px;
                }
            }

            .top-links {
                display: block;
                font-size: .8em;
                margin-bottom: 20px;

                li.menu-item {
                    display: block;
                    float: none;
                    margin: 0;

                    &:after {
                        display: none;
                    }

                    > a,
                    > h5 {
                        margin: 0;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        border-radius: 0;
                        border-top: 1px solid #ccc;
                        border-color: rgba(128, 128, 128, .15) !important;
                    }

                    &:first-child {
                        > a,
                        > h5 {
                            border-top-width: 0;
                        }
                    }
                }
            }

            .header-contact {
                margin: 0 0 8px;
                white-space: normal;
            }

            .header-copyright {
                font-size: .9em;
            }
        }

        #mini-cart.minicart-inline {
            .cart-popup {
                #{$left}: 0;
                #{$right}: auto;

                &:before,
                &:after {
                    #{$right}: auto;
                    #{$left}: 10px;
                }
            }
        }

        .side-bottom {
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 20px 10px;
        }
    }

    .page-wrapper.side-nav {
        .page-top {
            &.fixed-pos {
                position: fixed;
                z-index: 1001;
                width: 100%;
                box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
            }
        }
    }
}

.header-side-nav {
    .sidebar-menu {
        margin-bottom: 20px;

        > li.menu-item {
            > a,
            > h5 {
                margin-left: 0;
                margin-right: 0;
                border-color: rgba(128, 128, 128, .18) !important;
            }

            > .arrow {
                #{$right}: -5px;
            }

            &:last-child {
                &:hover {
                    border-radius: 0;
                }
            }
        }

        .menu-custom-block {
            a {
                margin-left: 0;
                margin-right: 0;
                padding-left: 5px;
                padding-right: 5px;

                &:last-child {
                    &:hover {
                        border-radius: 0;
                    }
                }
            }

            .fa {
                width: 18px;
                text-align: center;
            }
            .fa,
            .avatar {
                margin-#{$right}: 5px;
            }
            > .avatar img {
                margin-top: -5px;
                margin-bottom: -4px;
            }
        }
    }
}

@media #{$screen-normal} {
    .header-wrapper.header-side-nav {
        #header {
            .side-top {
                padding: 10px 0 0;

                .currency-switcher,
                .view-switcher {
                    float: $left;
                }

                .mini-cart {
                    float: $right;
                }
            }

            .logo {
                margin-bottom: 5px;
            }

            .sidebar-menu {
                display: none;
            }

            .share-links {
                margin: side-values(0 0 0 10px);

                a:last-child {
                    margin-#{$right}: 0;
                }
            }

            .header-copyright {
                display: none;
            }
        }
    }
}


@media #{$screen-normal} {
    .header-wrapper.header-side-nav {
        #header {
            .side-top {
                padding-top: 0;

                > .container {
                    > * {
                        display: none !important;
                    }

                    > .mini-cart {
                        display: block !important;
                        position: absolute !important;
                        top: 50%;
                        bottom: 50%;
                        height: 26px;
                        margin-top: -12px;
                        #{$right}: 15px;
                        z-index: 1001;
                    }
                }
            }
            .logo {
                margin: 0;
            }
            .share-links {
                display: none;
            }
            .show-minicart {
                .header-contact {
                    margin-#{$right}: 80px;
                }
            }
        }
    }
}

@media #{$screen-small} {
    .header-wrapper.header-side-nav {
        #header {
            .logo {
                margin: 0 auto;
            }
        }
    }
}

@media (min-width: 992px) {
    body.boxed {
        &.body-side {
            padding-#{$left}: (256px + $grid-gutter-width);
            padding-#{$right}: $grid-gutter-width;

            &.modal-open {
                padding-#{$left}: (256px + $grid-gutter-width) !important;
                padding-#{$right}: $grid-gutter-width !important;
            }

            .header-wrapper.header-side-nav {
                #{$left}: -276px;
                margin-top: -30px;
            }

            .page-wrapper.side-nav {
                max-width: 100%;
                > * {
                    padding-#{$left} : 0;
                }

                .container {
                    padding-left: $grid-gutter-width;
                    padding-right: $grid-gutter-width;
                }
            }

            .page-wrapper.side-nav .page-top.fixed-pos {
                #{$left}: (256px + $grid-gutter-width);
                #{$right}: $grid-gutter-width;
                width: auto;
            }
        }
    }
}