@import "../helpers/colors.scss";

nav {
    &#sidebarMenu {
        width: 9%;
        background-color: $green;
        padding: 0;

        // padding: 20px 18px;
        .sidebar-sticky {
            overflow: hidden;
            width: 9%;
            height: 100%;
            position: fixed;
        }

        .logoWrapper {
            // @include hor-center();
            // @include ver_center();
            height: 90px;
            width: 90px;
            margin: 0 auto;
            img{
                width: 70px;
                    height: 70px;
            }

            h3 {
                font-weight: bold;
                font-size: 1.4rem;
                color: #fff;
                line-height: 1.5;
            }
        }

        ul {
            &.nav {
                margin-top: 25%;
            }

            li {
                // padding-left: 15%;
                width: 90%;
                margin-left: 10%;
                text-align: center;
                position: relative;
                padding: 10px 0;
                a:hover::before,
                a:hover::after {
                    opacity: 1;
                }
                p {
                    margin-bottom: 0;
                }
                .ci {
                    padding-top: 0;
                    margin-bottom: 0;
                }
                &.active,
                &.current {
                    background-color: #f7f7f7;
                    border-top-left-radius: 50px;
                    border-bottom-left-radius: 50px;
                    // a {
                    //     background-color: #f7f7f7;
                    //     border-top-left-radius: 50px;
                    //     border-bottom-left-radius: 50px;
                    // }
                    .ci.ci-home {
                        background: url(../../../img/sideBarIcons/homeiconHover.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .ci.ci-cart {
                        background: url(../../../img/sideBarIcons/cartHover.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .ci.ci-computer {
                        background: url(../../../img/sideBarIcons/computerHover.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .ci.ci-book {
                        background: url(../../../img/sideBarIcons/001-bookHover.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .ci.ci-refund-white {
                        background: url(../../../img/icons/refund-green.png);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    .ci.ci-discount-white {
                        background: url(../../../img/sideBarIcons/001-discountHover.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                    &::before,
                    &::after {
                        position: absolute;
                    }
                    &::after {
                        content: " ";
                        background: url(../../../img/sideBarHoverBottom.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        width: 20px;
                        height: 20px;
                        bottom: -19px;
                        right: 0;
                    }
                    &::before {
                        content: " ";
                        background: url(../../../img/sideBarHoverTop.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        width: 20px;
                        height: 20px;
                        top: -19px;
                        right: -1px;
                    }
                }

                a {
                    color: #fff;
                    font-size: 1.2rem;
                    padding: 0;
                    height: 90%;
                    width: 90%;
                    position: relative;
                    text-transform: uppercase;
                    // animation-duration: 0.2s;
                    // animation-name: slide;
                    // width: 90%;
                    // float: right;
                    // padding-right: 10%;
                    &:hover {
                        // background: url("../../../img/icons/hoverSideBar.svg");
                        background-repeat: no-repeat;
                        background-size: 95%;
                        background-position: 20px 61%;
                        // border-top-left-radius: 100px;
                        // border-bottom-left-radius: 100px;
                        color: $green;

                        // &::after {
                        //   content: " ";
                        //   background: url(../../../img/sideBarHoverBottom.svg) no-repeat;
                        //   bottom: -21px;
                        // }

                        // &::before {
                        //   content: " ";
                        //   background: url(../../../img/sideBarHoverTop.svg) no-repeat;
                        //   top: -29px;
                        // }
                    }

                    &::before,
                    &::after {
                        position: absolute;
                        right: 0;
                        opacity: 0;
                        width: 30px;
                        height: 30px;
                        display: block;
                    }
                }
            }
        }

        .sidebar-info {
            font-size: 1.6rem;
            // margin-top: 10%;
            position: fixed;
            @include hor-center();
            left: 4.5%;
            bottom: 0;

            h4 {
                @include boldFont();
                color: #fff;
            }

            h5 {
                color: $green;
                background-color: #fff;
                border-radius: 30px;
                padding: 15px 20px;
                text-align: center;
                width: 95px;
                margin: 0 auto;
                @include boldFont();
                font-size: 2rem;
                line-height: 1;
            }

            .side-delimiter {
                height: 80px;
                width: 2px;
                background: #fff;
                margin: 25px auto;
            }

            .bottomLogo {
                background-color: #fff;
                height: 40px;
                width: 100%;
                margin: 0 auto;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                padding: 5%;
            }
        }
    }
}

nav {
    &#sidebarMenu {
        ul {
            li {
                &.active,
                &.current {
                    a {
                        // background: url(../../../img/icons/hoverSideBar.svg);
                        // background-repeat: no-repeat;
                        // background-size: 95%;
                        // background-position: 20px 61%;
                        color: #276462;

                        // .ci {
                        //     filter: invert(58%) sepia(46%) saturate(492%)
                        //         hue-rotate(129deg) brightness(92%) contrast(93%);
                        //     -ms-filter: invert(58%) sepia(46%) saturate(492%)
                        //         hue-rotate(129deg) brightness(92%) contrast(93%);
                        //     padding-top: 0;
                        //     margin-bottom: 0;
                        // }

                        p {
                            position: relative;
                        }

                        // &::before {
                        //     content: " ";
                        //     background: url("../../../img/hoverFull.svg");
                        //     background-size: 80%;
                        //     background-repeat: no-repeat;
                        //     background-position: 136% 50%;
                        //     bottom: 0;
                        //     opacity: 1;
                        //     width: 100%;
                        //     height: 100%;
                        // }

                        // &::after {}
                    }
                }
            }
        }
    }
}

@media (max-width: 1441px) {
    // nav#sidebarMenu ul li a .ci {
    //   padding-top: 55px;
    //   height: 70px;

    // }

    // nav#sidebarMenu ul li a {
    //     height: 70px;
    //     // padding-left: 15px;
    // }

    nav#sidebarMenu ul li.active a .ci,
    nav#sidebarMenu ul li.current a .ci {
        // padding-top: 40px;
    }

    nav#sidebarMenu ul li a .ci {
        // padding-top: 40px;
        // height: 58px;
    }

    nav {
        &#sidebarMenu {
            ul {
                li {
                    // a {
                    //     width: 90%;
                    //     float: right;

                    // }
                    a {
                        p {
                            font-size: 0.9rem;
                        }
                    }
                    &.active,
                    &.current {
                        a {
                            // height: 70px;
                            // border-top-left-radius: 50px;
                            // border-bottom-left-radius: 50px;
                            // background-color: #f7f7f7;

                            p {
                                font-size: 0.9rem;
                            }
                            // &::before,
                            // &::after {
                            //     width: auto;
                            //     height: auto;
                            // }
                            // &::before {
                            //     content: " ";
                            //     background: url("../../../img/icons/hoverFull.svg");
                            //     background-size: 90%;
                            //     background-repeat: no-repeat;
                            //     background-position: 175% 50%;
                            //     bottom: 0;
                            //     opacity: 1;
                            //     // width: 100%;
                            //     // height: 100%;
                            //     //   content: " ";
                            //     //   background: url(../../../img/sideBarHoverTop.svg) no-repeat;
                            //     //   top: -8%;
                            //     //   left: 82%;
                            //     //   width: 25px;
                            //     //   height: 25px;
                            // }

                            // &::after {
                            //   content: " ";
                            //   background: url(../../../img/sideBarHoverBottom.svg) no-repeat;
                            //   bottom: -8%;
                            //   left: 81%;
                            //   opacity: 1;
                            //   width: 25px;
                            //   height: 25px;
                            // }
                        }
                    }
                }
            }

            .sidebar-info {
                margin-top: 0;

                .bottomLogo {
                    width: 100%;
                }

                h5 {
                    font-size: 1.5rem;
                    padding: 10px 20px;
                }

                .side-delimiter {
                    height: 25px;
                    margin: 10px auto;
                }
            }
        }
    }
}

@media (max-width: 1366px) {
    nav {
        &#sidebarMenu {
            ul {
                li {
                    a {
                        // height: 75px;
                    }

                    // &.active,
                    // &.current {
                    //     a {
                    //         // &::before {
                    //         //   content: " ";
                    //         //   background: url(../../../img/hoverFull.svg);
                    //         //   background-size: 110%;
                    //         //   background-repeat: no-repeat;
                    //         //   background-position: center left;
                    //         //   bottom: 0;
                    //         //   opacity: 1;
                    //         //   width: 100%;
                    //         //   height: 100%;
                    //         // }
                    //     }
                    // }
                }
            }
        }
    }
}

@media (max-width: 1366px) and (min-width: 1025px) {
    nav#sidebarMenu .sidebar-info {
        margin-top: 0;
        // position: absolute;
        bottom: 0;
        // left: 10%;

        .bottomLogo {
            width: 100%;

            img {
                width: 100%;
            }
        }
    }

    nav#sidebarMenu .sidebar-info h5 {
        width: unset;
    }
}

@media (max-width: 1120px) {
    nav#sidebarMenu ul li.active a::before,
    nav#sidebarMenu ul li.current a::before {
        background-size: 95%;
    }

    nav#sidebarMenu ul li a .ci,
    nav#sidebarMenu ul li.current a .ci {
        // padding-top: 55px;
    }

    nav {
        &#sidebarMenu {
            .sidebar-sticky {
                overflow-y: scroll;
            }

            .logoWrapper {
                height: auto;

                img {
                    width: 70px;
                    height: 70px;
                }
                h3{
                    font-size: 1.2rem;
                }
            }

            ul {
                li {
                    a {
                        .ci {
                            height: 25px;
                            width: 25px;
                        }
                    }
                }
            }

            // .sidebar-info {
            //     left: 0%;
            // }

            //   .side-delimiter {
            //     display: none;
            //   }

            //   .bottomLogo {
            //     position: absolute;
            //     bottom: 0;
            //   }

            //   .bonus-amount {
            //     position: absolute;
            //     bottom: 10%;
            //   }
            // }
        }
    }
}

@media (max-width: 768px) {
    nav#sidebarMenu ul li.active a::before,
    nav#sidebarMenu ul li.current a::before {
        background-size: 99%;
    }

    nav#sidebarMenu ul li a p,
    nav#sidebarMenu ul li a p {
        font-size: 0.9rem;
    }

    nav {
        &#sidebarMenu {
            ul {
                li {
                    padding: 5px 0;
                    // a {
                    //     font-size: 1rem;
                    // }
                }
            }

            ul li a,
            ul li a {
                // background-position: left;

                // &::before {
                //   top: -4%;
                //   left: 65%;
                // }

                // &::after {
                //   bottom: -6%;
                //   left: 65%;
                // }
                .ci {
                    // padding-top: 72px;
                    height: 20px;
                    width: 20px;
                }
            }

            .logoWrapper {
                width: 50px;

                img {
                    width: 50px;
                    height: 50px;
                }

                h3 {
                    font-size: 1.2rem;
                    line-height: 1.3;
                }
            }

            .sidebar-info {
                // position: absolute;
                bottom: 0;

                .bonus-amount,
                .h4,
                .bottomLogo {
                    position: unset;
                }

                h4 {
                    font-size: 1.2rem;
                    text-align: center;
                }

                .bonus-amount {
                    width: 100%;

                    h5 {
                        padding: 10px 0;
                        font-size: 1.6rem;
                        width: 65px;
                    }
                }

                .bottomLogo {
                    width: 100%;
                    // margin-top: 50px;

                    img {
                        width: 100%;
                        padding-top: 10px;
                    }
                }
            }
        }
    }
}

@media (min-width: 2560px) {
    // nav#sidebarMenu ul li.active a,
    // nav#sidebarMenu ul li.current a {
    //     // background: url(../../../img/icons/hoverSideBar.svg);
    //     // background-repeat: no-repeat;
    //     // background-size: 75%;
    //     // background-position: 65px 50%;
    //     // color: #276462;
    // }

    // nav#sidebarMenu ul li.active a::before,
    // nav#sidebarMenu ul li.current a::before {
    //     content: " ";
    //     background: url(../../../img/sideBarHoverTop.svg) no-repeat;
    //     opacity: 1;
    //     top: -29px;
    //     right: -177px;
    // }

    // nav#sidebarMenu ul li.active a::after,
    // nav#sidebarMenu ul li.current a::after {
    //     content: " ";
    //     background: url(../../../img/sideBarHoverBottom.svg) no-repeat;
    //     bottom: -26%;
    //     left: 87%;
    // }
}
@media (max-height: 530px) {
    nav#sidebarMenu .sidebar-info {
        display: none;
    }
}