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

nav {
    color: #000 !important;
    left: 9%;

    &.topNav {
        width: 91%;
        float: right;
        height: 92px;
        background-color: #fff;
        position: fixed;
        top: 0;
        padding: 1%;
        text-align: center;
        z-index: 9999999;
        .logo {
            img {
                height: 70px;
                width: auto;
            }
        }
        .search-icon {
            background: url("../../../img/icons/search.svg");
            height: 23px;
            width: 23px;
            background-size: cover;
            background-repeat: no-repeat;
            display: inline-block;
            position: absolute;
            left: 6%;
            top: 22%;
            z-index: 2;
        }

        .search-form:focus .search-icon:hover {
            display: none;
        }

        .search-form {
            position: relative;
            top: 0;
            left: 0;
            width: 80%;
            padding: 20px 40px;
            color: $lightGreen;
            font-size: 1.5rem;

            &:focus {
                border-color: transparent !important;
                box-shadow: none;
                background-color: #f7f7f7;
                border-radius: 20px;
            }
        }
    }

    .top-menu {
        .do-login {
            color: $green;
            font-size: 2rem;
        }
        // height: 50px;
        ul {
            float: right;
            display: block;
            height: 40px;
            position: relative;

            li {
                display: inline;
                line-height: 40px;
                position: relative;
                top: 0;
                left: 0;
                cursor: pointer;

                &.hasNotification {
                    position: relative;
                    top: 0;
                    left: 0;
                    &.active {
                        &::after {
                            content: " ";
                            background: url("../../../img/icons/notificationBadge.svg")
                                center center no-repeat;
                            background-size: cover;
                            height: 16px;
                            width: 16px;
                            position: absolute;
                            top: -10px;
                            right: 30%;
                        }
                    }
                }

                a {
                    &:hover {
                        text-decoration: none;
                    }
                }

                img {
                    padding: 0 20px;

                    &.icons {
                        border-right: 2px solid #707070;
                    }
                }

                p {
                    display: inline;
                    padding: 0 15px;
                    font-size: 1.6rem;
                    @include boldFont();
                    vertical-align: middle;
                }

                .profile-picture-wrapper {
                    display: inline-block;
                    width: 52px;
                    height: 52px;
                    border-radius: 100%;

                    img {
                        object-fit: cover;
                        object-position: center center;
                        padding: 0;
                        margin: 0;
                    }
                }
            }
        }
    }
}

// @media(max-width:1196px) {
//   nav {
//     .top-menu {
//       ul {

//         li {

//           .profile-picture-wrapper {
//             width: 35px
//           }
//         }
//       }
//     }
//   }

// }

@media (max-width: 1196px) {
    nav {
        .top-menu {
            ul {
                // float: unset;

                li {
                    img {
                        padding: 0 10px;
                    }

                    .profile-picture-wrapper {
                        width: 35px;
                        height: auto;

                        img {
                            width: 100%;
                            height: auto;
                        }
                    }

                    p {
                        padding: 0;
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    nav {
        .top-menu {
            text-align: left;
            padding: 0;

            ul {
                li {
                    img.icons {
                        height: auto;
                        width: 40px;
                    }

                    p {
                        padding: 0 5px;
                    }
                }
            }
        }
    }
}