.top-navbar {
    height: 72px;
    border-bottom: 1px solid var(--gray-200);

    .select2-selection {
        border-color: transparent;
        background-color: transparent;

        .select2-selection__rendered {
            color: var(--gray-500);
        }
    }

    .top-nav-search-form {

        input {
            height: 48px !important;
            border-radius: 12px;
            border: 1px solid var(--gray-300);
        }

        .search-icon {
            position: absolute;
            top: 16px;
            bottom: 16px;
            right: 16px;
        }
    }
}

.navbar-auth-user {
    position: relative;

    &__avatar {
        width: 29px;
        min-width: 29px;
        height: 29px;

        &.is-panel-nav {
            width: 44px;
            min-width: 44px;
            height: 44px;
        }
    }

    &:not(:hover) > &__dropdown {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        -o-transform: translateY(15px);
        transform: translateY(15px);
    }

    &__dropdown {
        position: absolute;
        top: 29px;
        right: 0;
        width: 218px;
        background: var(--white);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        transition: all 0.3s ease;
        z-index: 46;

        &.is-panel-nav {
            top: 44px;
        }

        .rtl & {
            right: auto;
            left: 0;
        }

        .dropdown__user-avatar {
            width: 38px;
            min-width: 38px;
            height: 38px;

            .dropdown__user-avatar__badge {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 14px;
                min-width: 14px;
                height: 14px;
            }
        }

        &-item {
            transition: all .3s ease;

            &, & > a {
                color: var(--gray-500);
            }

            .icons {
                width: 20px;
                min-width: 20px;
                height: 20px;
                color: var(--gray-500);
            }

            .count-badge {
                min-width: 16px;
                height: 16px;
            }

            &:hover {
                background-color: var(--gray-100);

                &, & > a, & > a .icons {
                    color: var(--primary);
                }

                & > a {
                    transform: translateX(8px);
                }
            }
        }
    }
}

.theme-color-toggle {
    position: relative;
    cursor: pointer;

    &__panel {
        width: 32px;
        height: 32px;
    }

    .icons {
        position: absolute;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .light-icon {
        opacity: 0;
        transform: scale(0);
    }

    .dark-icon {
        opacity: 1;
        transform: scale(1);
    }

    &.dark-mode {
        .light-icon {
            opacity: 1;
            transform: scale(1);
        }

        .dark-icon {
            opacity: 0;
            transform: scale(0);
        }
    }
}