//
// Topbar
// --------------------------------------------------

.navbar.topbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
}

.topbar {
    position: fixed;
    height: var(--hh-ct-top-bar-height);
    width: 100%;
    padding-left: 0;
    padding-right: 0;

    ul.nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: normal;
    }

    .dropdown-header {
        font-size: 16px;
        padding: 6px 16px;
        margin-bottom: 10px;
        font-weight: var(--hh-ct-ph-font-weight);
        color: var(--hh-text-color-soft);

        .arrow {
            display: none !important;
        }

        .dropdown-header-actions {
            float: right;

            a, button {
                &:hover {
                    background: var(--bs-light);
                }

                i {
                    margin: 0;
                }
            }
        }

        &:hover {
            color: var(--hh-text-color-soft);
        }
    }

    .dropdown-footer {
        margin: 10px;
    }
}

#topbar {
    background-color: var(--hh-ct-top-menu-background-color);
    padding: 0;
    top: 0;
    z-index: 1030;
    overflow: unset;
    border: 0;
    border-bottom-width: var(--hh-ct-panel-border-width);
    border-bottom-style: var(--hh-ct-panel-border-style);
    border-bottom-color: var(--hh-ct-panel-border-color);
    box-shadow: var(--hh-ct-panel-box-shadow);

    > .container {
        #text-logo {
            color: var(--hh-ct-top-menu-text-color);
        }

        &:before, &:after {
            content: none;
        }

        a.navbar-brand {
            padding: 0 5px 0 0;
            height: auto;

            img#img-logo {
                max-width: 100%;
                max-height: calc(var(--hh-ct-top-bar-height) - 10px);
            }

        }

        a.navbar-brand-text {
            padding: 0 10px 0 0;
            line-height: 33px;
            font-weight: var(--hh-ct-font-bold-weight);
            white-space: nowrap;
        }

        > :first-child {
            margin-right: 13px;
        }

        > :last-child {
            margin-left: 13px;
        }

        .nav > .account {
            .dropdown-toggle {
                display: block;
                padding: 0;
                line-height: 1.1em;
                text-align: left;

                @include media-breakpoint-down(md) {
                    padding-right: 8px;
                }

                span {
                    font-size: 12px;

                    &.has-online-status {
                        margin-bottom: 0;
                    }
                }
            }
        }

        #top-menu-nav {
            justify-content: var(--hh-ct-top-menu-nav-justify-content);
            height: var(--hh-ct-top-bar-height);
            overflow: hidden; // Will become visible for the dropdown menu via JS
        }

        .notifications {
            position: relative;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 1;
            white-space: nowrap;

            .btn-group {
                position: relative;
                text-align: left;
            }

            .btn-group > a {
                color: var(--hh-ct-top-menu-text-color);
                padding: 5px 10px;
                margin: 0 2px;
                display: inline-block;
                border-radius: 2px;
                text-decoration: none;
                text-align: left;

                &:hover,
                &:active,
                &:focus {
                    background-color: var(--hh-ct-top-menu-button-hover-background-color);
                    color: var(--hh-ct-top-menu-button-hover-text-color);
                    text-decoration: none;
                    border-bottom: none;
                }
            }

            .btn-group > .badge {
                position: absolute;
                top: -3px;
                right: -2px;
                padding: 4px;
                min-width: 18px; // Insure that the badge is round when only 1 digit
            }

            .dropdown-menu {
                width: 350px;
                left: auto;
                right: -70px;

                .hh-list {
                    max-height: 400px;
                    overflow: auto;

                    > div.d-flex, > a.d-flex {
                        position: relative;

                        i.approval {
                            position: absolute;
                            left: 2px;
                            top: 36px;
                            font-size: 14px;
                        }

                        i.accepted {
                            color: var(--bs-success);
                        }

                        i.declined {
                            color: var(--bs-danger);
                        }

                        &.new {
                            background-color: transparent;
                            border-left: none;
                        }

                        &:not(.new) {
                            > a {
                                * &, strong {
                                    color: var(--hh-text-color-secondary);
                                }
                            }
                        }
                    }
                }
            }
        }

        .dropdown-footer {
            margin: 24px 16px 19px;

            .btn {
                width: 100%;
            }
        }

        .btn-group {
            > a:hover {
                background-color: var(--hh-background-color-secondary);
            }

            > a:active,
            &.open > a,
            &.open .dropdown-toggle {
                background-color: var(--bs-primary);
                color: var(--hh-text-color-contrast);
            }
        }

        .btn-enter {
            background-color: var(--bs-primary);
            margin: 6px 0;
        }

        .hh-list {
            > div, > a {
                padding: 8px 16px;
                border-bottom: none;

                &.new {
                    border: none;
                    background: none;

                    &:hover {
                        background-color: var(--hh-background-color-secondary) !important;
                    }

                    time {
                        color: var(--bs-info);
                    }
                }

                &.placeholder {
                    border-bottom: none;
                }

                time {
                    font-size: 10px;
                }

                i.accepted {
                    color: var(--bs-success) !important;
                }

                i.declined {
                    color: var(--bs-danger) !important;
                }
            }
        }

        .account .user-title {
            display: none !important;
        }

        .dropdown.account > a,
        .dropdown.account.open > a,
        .dropdown.account > a:hover,
        .dropdown.account.open > a:hover {
            background-color: transparent;
        }

        .dropdown-menu {
            padding-top: 0;
            padding-bottom: 0;
        }

        // Space and search dropdown menu
        #space-menu-dropdown,
        #search-menu-dropdown {
            width: 400px;

            .hh-list {
                max-height: 400px;
                overflow: auto;
            }

            form {
                margin: 10px;
            }

            .search-reset {
                position: absolute;
                color: var(--hh-text-color-soft3);
                margin: 7px;
                top: 0;
                right: 40px;
                z-index: 10;
                display: none;
                cursor: pointer;
            }
        }

        #search-menu {
            display: block;
            height: auto;
            padding: 8px 2px;
            color: var(--hh-ct-top-menu-text-color);

            &:hover,
            &:active,
            &:focus {
                background-color: var(--hh-ct-top-menu-button-hover-background-color);
                color: var(--hh-ct-top-menu-button-hover-text-color);
                text-decoration: none;
                border-bottom: none;
            }

            i {
                margin-bottom: 0;
            }
        }


        .nav > li > a {
            color: var(--hh-ct-top-menu-text-color);
        }

        > .nav > li {
            > a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: calc(var(--hh-ct-top-bar-height) - var(--hh-ct-panel-border-width));
                color: var(--hh-ct-top-menu-text-color);
                padding: 0 13px;
                text-decoration: none;
                text-shadow: none;
                font-weight: var(--hh-ct-font-bold-weight);
                font-size: var(--hh-ct-top-bar-font-size);
                text-transform: uppercase;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                &.active, &:hover {
                    text-decoration: none;
                }

                &:not(.active) {
                    &:hover,
                    &:focus,
                    &:active {
                        background-color: var(--hh-ct-top-menu-button-hover-background-color);
                        color: var(--hh-ct-top-menu-button-hover-text-color);
                        text-decoration: none;
                        border-bottom: none;
                    }
                }

                > br {
                    display: none;
                }

                i {
                    font-size: 14px;
                    margin-bottom: 5px;
                }
            }

            > ul > li > a {
                background-color: var(--hh-background-color-main);
                color: var(--hh-text-color-highlight);
            }

            > ul > li > a:hover, > li > ul > li > a.active {
                background-color: var(--bs-primary);
                color: var(--hh-text-color-contrast);
            }
        }

        #space-menu-dropdown li > ul > li > a > .d-flex p {
            color: var(--hh-text-color-soft);
            font-size: 11px;
            margin: 0;
            font-weight: var(--hh-ct-font-family);
        }

        // Remove caret icon from dropdown toggle
        .dropdown-toggle::after {
            display: none;
        }

        // For JS cleanTheme.topNavigation.updateBtnStatus()
        .btn-group > a.active {
            background-color: var(--hh-ct-top-menu-text-color);
            color: var(--hh-ct-top-menu-background-color);
        }
    }
}

body.hh-ct-menu-style-background {
    #topbar > .container > .nav {
        > li > a.active {
            background-color: var(--hh-ct-top-menu-text-color);
            color: var(--hh-ct-top-menu-background-color);
            border-bottom: none;
        }
    }
}

body.hh-ct-menu-style-bordered {
    #topbar > .container > .nav {
        > li > a.active {
            padding-top: 3px;
            border-bottom: 3px solid var(--bs-accent);
            color: var(--hh-text-color-highlight);
        }
    }
}
