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

#topNav {
    border-bottom: 1px solid #707070;
    height: 130px;
    // line-height: 130px;

    .page-title {
        height: 130px;

        h2 {
            color: $green;
            text-transform: uppercase;
            font-size: 6rem;
            @include boldFont();
            // line-height: 130px;
            position: relative;
            @include ver-center();
            top: 50%;
        }
    }

    .userInfo {
        position: relative;
        @include ver-center();
        z-index: 9;
        ul {
            li {
                margin-right: 40px;

                p,
                button {
                    font-size: 1.6rem;
                    @include boldFont();
                    color: $black;
                    margin-right: -25px;
                    &.dropdown-toggle {
                        &::after {
                            color: #276462;
                            @include ver-center();
                            vertical-align: baseline;
                        }
                    }
                }

                .dropdown-menu {
                    width: 100%;
                    padding: 15px 20px;
                    border: 1px solid #676767;
                    border-radius: 20px;
                    a {
                        font-size: 1.6rem;
                        color: $green;
                        text-align: center;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    &::before {
                        content: " ";
                        background: url("../../../img/notificationBefore.svg");
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                        position: absolute;
                        top: -19px;
                        @include hor-center();
                        height: 28px;
                        width: 28px;
                    }
                }

                .user-img {
                    width: 55px;
                    height: 55px;

                    img {
                        width: 100%;
                    }

                    // border-right: 1px solid $mediumGray;
                    // padding-right: 30px;
                }

                .searchIcon {
                    cursor: pointer;
                }
                .searchForm {
                    input {
                        display: none;
                        border: 1px solid $mediumGray;
                        border-radius: 20px;
                        padding: 5px 10px;
                        font-size: 1.6rem;
                        border-radius: 20px;
                        -moz-border-radius: 20px;
                        -webkit-border-radius: 20px;
                        background-color: #fff;
                        border: 1px solid #ededed;
                        box-shadow: 0px 3px 6px #0000000d;
                        color: $black;

                        &:focus {
                            outline: none;
                        }
                    }
                }
                &.checkNotification {
                    position: relative;
                    &.hasNotification {
                        &::after {
                            content: " ";
                            background: url("../../../img/icons/notificationBadge.svg")
                                center center no-repeat;
                            background-size: cover;
                            height: 16px;
                            width: 16px;
                            position: absolute;
                            top: -0;
                            right: 0%;
                        }
                    }
                    .notificationWindow {
                        display: none;
                        width: 300px;
                        background: #fff;
                        border: 2px solid #676767;
                        position: absolute;
                        top: 58px;
                        left: -40px;
                        text-align: left;
                        display: none;
                        height: 330px;
                        z-index: 999;
                        &::before {
                            content: " ";
                            background: url(../../../img/notificationBefore.svg);
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                            position: absolute;
                            top: -19px;
                            left: 40px;
                            height: 30px;
                            width: 30px;
                        }
                        .notifications-wrapper {
                            padding: 20px 15px;
                            overflow-y: auto;
                            height: 100%;
                        }
                        hr {
                            border-color: #707070;
                        }
                        .singleNotification {
                            text-align: center;
                            padding: 5%;
                            &:hover {
                                box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
                            }
                            hr {
                                border-color: rgba(0, 0, 0, 0.1);
                            }
                            h3 {
                                span {
                                    font-size: 1.75rem;
                                    font-family: "IstokWebBold", sans-serif !important;
                                    font-weight: 700 !important;
                                    color: $green;
                                }
                            }
                            p {
                                text-align: center;
                                margin: 0;
                            }
                            .icon-container {
                                text-align: center;
                                i {
                                    font-size: 2rem;
                                    cursor: pointer;
                                    &.fa-check {
                                        margin-right: 5rem;
                                        &:hover {
                                            color: #0eafb1;
                                        }
                                    }
                                    &.fa-times {
                                        color: rgb(240, 42, 42);
                                        &:hover {
                                            color: red;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1366px) {
    #topNav {
        .page-title {
            h2 {
                font-size: 5rem;
            }
        }
    }
}
@media (max-width: 1024px) {
    #topNav {
        ul {
            li {
                margin-right: 25px;
                .searchForm {
                    input {
                        width: 115px;
                    }
                }
            }
        }
        .page-title {
            h2 {
                font-size: 3rem;
            }
        }
    }
}