/*
    NavBar Style
*/
body {
    padding-top: var(--navbar-height);
}

#navbar {
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    position: fixed !important;
    top: 0px;
    z-index: 998;
    background-color: var(--navbar-background);
    color: var(--aside-color);
    padding: 0px 15px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.04);
    transition: width 0.3s linear;
    border-bottom: 1px solid var(--border-color);

    #btn-aside-toggle {
        transition: all 0.2s linear;
        padding: 0px 20px;
        font-size: 26px;
        cursor: pointer;
        i,
        svg {
            fill: #000 !important;
            color: var(--color) !important;
        }
        &:hover {
            background-color: var(--navbar-hover-color);
            color: var(--navbar-color);
        }

        @media (max-width: 540px) {
            padding-right: 0px;
        }
    }

    #start-of-navbar {
        form {
            width: 400px;

            @media (max-width: 768px) {
                width: 240px;
            }

            @media (max-width: 540px) {
                width: 200px;
            }

            @media (max-width: 350px) {
                width: 180px;
            }
        }
    }
    /* End Of Navbar */
    #end-of-navbar {
        float: right;
        /* Replace */
        $buttonSize: 45px;
        $countSize: 20px;

        #notifications,
        #messages,
        #profile {
            position: relative;

            .dropdown-box {
                .btn-toggle {
                    position: relative;
                    background-color: #eaeaea;
                    color: #000;
                    width: $buttonSize;
                    height: $buttonSize;
                    line-height: $buttonSize;
                    border-radius: 50%;
                    text-align: center;
                    margin-left: 5px;
                    /* Replace */

                    .icon {
                        font-size: 20px;
                    }

                    .count {
                        background-color: red;
                        position: absolute;
                        height: $countSize;
                        line-height: $countSize;
                        width: $countSize;
                        text-align: center;
                        right: -3px;
                        /* Replace */
                        top: 3px;
                        font-size: 10px;
                        color: #fff;
                        border-radius: 50%;
                        animation: haveNotificationsEffect 0.5s linear infinite alternate;
                    }
                }

                .active {
                    background-color: var(--aside-link-active-background) !important;
                    color: var(--aside-link-active-color);
                }

                .data {
                    top: 3px !important;
                    left: -10px !important;
                    border-radius: var(--border-radius);
                    width: 340px;
                    height: 275px;
                    background-color: rgb(255, 255, 255);
                    border: solid 1px var(--border-color);
                    padding: 0px !important;

                    .ul-items {
                        margin-bottom: 0px;

                        .li-item {
                            list-style: none;
                            line-height: 20px;
                            border-bottom: 1px solid var(--border-color);
                            padding: 8px 10px;

                            .title {
                                color: var(--color);
                                font-size: 15px;
                            }

                            .time,
                            svg,
                            i {
                                font-size: 12px;
                                color: var(--secondary-color);
                            }
                        }
                    }

                    .read-more {
                        line-height: 40px;
                    }
                }
            }
        }
    }
}

@keyframes haveNotificationsEffect {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0px 0px 10px red;
    }
}

.navbar-main-width {
    width: calc(100% - var(--aside-width));
}

.navbar-full-width {
    width: 100%;
}

// @media (max-width: 480px) {
//     /* End Of Navbar */
//     #end-of-navbar {
//         .dropdown-box {
//             .btn-toggle {
//                 line-height: 53px !important;

//                 .count {
//                     line-height: 23px !important;
//                 }
//             }
//         }
//     }
// }
