<template>
    <nav class="metro-nav navbar navbar-expand navbar-light navbar-laravel sticky-top shadow-none py-1">
        <div class="container-fluid">
                <a class="navbar-brand d-flex align-items-center" href="/i/web" title="Logo">
                    <img :src="config.logo" height="30px" class="px-2" loading="eager" alt="Pixelfed logo">
                    <span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">
                        {{ brandName }}
                    </span>
                </a>

                <div class="collapse navbar-collapse">
                    <div class="navbar-nav ml-auto">
                        <autocomplete
                            class="searchbox"
                            :search="autocompleteSearch"
                            :placeholder="$t('navmenu.search')"
                            aria-label="Search"
                            :get-result-value="getSearchResultValue"
                            :debounceTime="700"
                            @submit="onSearchSubmit"
                            ref="autocomplete">

                            <template #result="{ result, props }">
                                <li
                                v-bind="props"
                                class="autocomplete-result sr"
                                >
                                    <div v-if="result.s_type === 'account'" class="media align-items-center my-0">
                                        <img :src="result.avatar" width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
                                        <div class="media-body sr-account">
                                            <div class="sr-account-acct" :class="{ compact: result.acct && result.acct.length > 24 }">
                                                &commat;{{ result.acct }}
                                                <b-button
                                                    v-if="result.locked"
                                                    v-b-tooltip.html
                                                    title="Private Account"
                                                    variant="link"
                                                    size="sm"
                                                    class="p-0"
                                                    >
                                                    <i class="far fa-lock fa-sm text-lighter ml-1"></i>
                                                </b-button>
                                            </div>
                                            <template v-if="result.is_admin">
                                                <div class="sr-account-stats">
                                                    <div class="sr-account-stats-followers text-danger font-weight-bold">
                                                        Admin
                                                    </div>
                                                    <div>·</div>
                                                    <div class="sr-account-stats-followers font-weight-bold">
                                                        <span>{{ formatCount(result.followers_count) }}</span>
                                                        <span>Followers</span>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <template v-if="result.local">
                                                    <div class="sr-account-stats">
                                                        <div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
                                                            <span>{{ formatCount(result.followers_count) }}</span>
                                                            <span>Followers</span>
                                                        </div>
                                                        <div v-if="result.followers_count && result.statuses_count">·</div>
                                                        <div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
                                                            <span>{{ formatCount(result.statuses_count) }}</span>
                                                            <span>Posts</span>
                                                        </div>
                                                        <div v-if="!result.followers_count && result.statuses_count">·</div>
                                                        <div class="sr-account-stats-statuses font-weight-bold">
                                                            <i class="far fa-clock fa-sm"></i>
                                                            <span>{{ timeAgo(result.created_at) }}</span>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div class="sr-account-stats">
                                                        <div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
                                                            <span>{{ formatCount(result.followers_count) }}</span>
                                                            <span>Followers</span>
                                                        </div>
                                                        <div v-if="result.followers_count && result.statuses_count">·</div>
                                                        <div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
                                                            <span>{{ formatCount(result.statuses_count) }}</span>
                                                            <span>Posts</span>
                                                        </div>
                                                        <div v-if="!result.followers_count && result.statuses_count">·</div>

                                                        <div v-if="!result.followers_count && !result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
                                                            Remote Account
                                                        </div>
                                                        <div v-if="!result.followers_count && !result.statuses_count">
                                                            ·
                                                        </div>
                                                        <b-button
                                                            v-b-tooltip.html
                                                            :title="'Joined ' + timeAgo(result.created_at) + ' ago'"
                                                            variant="link"
                                                            size="sm"
                                                            class="sr-account-stats-statuses p-0"
                                                            >
                                                            <i class="far fa-clock fa-sm"></i>
                                                            <span class="font-weight-bold">{{ timeAgo(result.created_at) }}</span>
                                                        </b-button>
                                                    </div>
                                                </template>
                                            </template>
                                        </div>
                                    </div>

                                    <div v-else-if="result.s_type === 'hashtag'" class="media align-items-center my-0">
                                        <div class="media-icon">
                                            <i class="far fa-hashtag fa-large"></i>
                                        </div>
                                        <div class="media-body sr-tag">
                                            <div class="sr-tag-name" :class="{ compact: result.name && result.name.length > 26 }">
                                                #{{ result.name }}
                                            </div>
                                            <div v-if="result.count && result.count > 100" class="sr-tag-count">
                                                {{ formatCount(result.count) }} {{ result.count == 1 ? 'Post' : 'Posts' }}
                                            </div>
                                        </div>
                                    </div>

                                    <div v-else-if="result.s_type === 'status'" class="media align-items-center my-0">
                                        <img :src="result.account.avatar"  width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">

                                        <div class="media-body sr-post">
                                            <div class="sr-post-acct" :class="{ compact: result.acct && result.acct.length > 26 }">
                                                &commat;{{ truncate(result.account.acct, 20) }}
                                                <b-button
                                                    v-if="result.locked"
                                                    v-b-tooltip.html
                                                    title="Private Account"
                                                    variant="link"
                                                    size="sm"
                                                    class="p-0"
                                                    >
                                                    <i class="far fa-lock fa-sm text-lighter ml-1"></i>
                                                </b-button>
                                            </div>
                                            <div class="sr-post-action">
                                                <div class="sr-post-action-timestamp">
                                                    <i class="far fa-clock fa-sm"></i>
                                                    {{ timeAgo(result.created_at)}}
                                                </div>
                                                <div>·</div>
                                                <div class="sr-post-action-label">
                                                    Tap to view post
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </template>
                        </autocomplete>

                    </div>
                    <div class="ml-auto">
                        <ul class="navbar-nav align-items-center">
                            <li class="nav-item dropdown ml-2">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu">
                                    <i class="d-none far fa-user fa-lg text-dark"></i>
                                    <span class="sr-only">User Menu</span>
                                    <img :src="user.avatar" class="nav-avatar rounded-circle border shadow" width="30" height="30" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
                                </a>

                                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="navbarDropdown">
                                    <ul class="nav flex-column">
                                        <li class="nav-item nav-icons">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <router-link class="nav-link text-center" to="/i/web">
                                                    <div class="icon text-lighter"><i class="far fa-home fa-lg"></i></div>
                                                    <div class="small">{{ $t('navmenu.homeFeed') }}</div>
                                                </router-link>

                                                <router-link v-if="hasLocalTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'local' } }">
                                                    <div class="icon text-lighter"><i class="fas fa-stream fa-lg"></i></div>
                                                    <div class="small">{{ $t('navmenu.localFeed') }}</div>
                                                </router-link>

                                                <router-link v-if="hasNetworkTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'global' } }">
                                                    <div class="icon text-lighter"><i class="far fa-globe fa-lg"></i></div>
                                                    <div class="small">{{ $t('navmenu.globalFeed') }}</div>
                                                </router-link>
                                            </div>
                                        </li>

                                        <li class="nav-item nav-icons">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <router-link class="nav-link text-center" to="/i/web/discover">
                                                    <div class="icon text-lighter"><i class="far fa-compass"></i></div>
                                                    <div class="small">{{ $t('navmenu.discover') }}</div>
                                                </router-link>

                                                <router-link class="nav-link text-center" to="/i/web/notifications">
                                                    <div class="icon text-lighter">
                                                        <i class="far fa-bell"></i>
                                                    </div>
                                                    <div class="small">
                                                        {{ $t('navmenu.notifications') }}
                                                    </div>
                                                </router-link>

                                                <router-link class="nav-link text-center px-3" :to="'/i/web/profile/' + user.id">
                                                    <div class="icon text-lighter">
                                                        <i class="far fa-user"></i>
                                                    </div>
                                                    <div class="small">{{ $t('navmenu.profile') }}</div>
                                                </router-link>
                                            </div>
                                            <hr class="mb-0" style="margin-top: -5px;opacity: 0.4;" />
                                        </li>

                                        <li class="nav-item">
                                            <router-link class="nav-link" to="/i/web/compose">
                                                <span class="icon text-lighter"><i class="far fa-plus-square"></i></span>
                                                {{ $t('navmenu.compose') }}
                                            </router-link>
                                        </li>

                                        <li class="nav-item">
                                            <router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/direct">
                                                <span>
                                                    <span class="icon text-lighter">
                                                        <i class="far fa-envelope"></i>
                                                    </span>
                                                    {{ $t('navmenu.directMessages') }}
                                                </span>
                                            </router-link>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="/i/web" @click.prevent="openUserInterfaceSettings">
                                                <span class="icon text-lighter"><i class="far fa-brush"></i></span>
                                                {{ $t('navmenu.appearance') }}
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" href="/settings/home">
                                                <span class="icon text-lighter"><i class="far fa-cog"></i></span>
                                                {{ $t('navmenu.settings') }}
                                            </a>
                                        </li>

                                        <li v-if="user.is_admin" class="nav-item">
                                            <hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
                                            <a class="nav-link" href="/i/admin/dashboard">
                                                <span class="icon text-lighter">
                                                    <i class="far fa-tools"></i>
                                                </span>
                                                {{ $t('navmenu.admin') }}
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
                                            <a class="nav-link" href="/" @click.prevent="logout()">
                                                <span class="icon text-lighter">
                                                    <i class="far fa-sign-out"></i>
                                                </span>
                                                {{ $t('navmenu.logout') }}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>

        <b-modal
            ref="uis"
            hide-footer
            centered
            body-class="p-0 ui-menu"
           :title="$t('navmenu.appearance')">
            <div class="list-group list-group-flush">
                <div class="list-group-item px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="font-weight-bold mb-1">{{ $t('appearance.theme') }}</p>
                            <p class="small text-muted mb-0"></p>
                        </div>

                        <div class="btn-group btn-group-sm">
                            <button
                                class="btn"
                                :class="[ uiColorScheme == 'system' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleUi('system')">
                                {{ $t('appearance.auto') }}
                            </button>
                            <button
                                class="btn"
                                :class="[ uiColorScheme == 'light' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleUi('light')">
                                {{ $t('appearance.lightMode') }}
                            </button>
                            <button
                                class="btn"
                                :class="[ uiColorScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleUi('dark')">
                                {{ $t('appearance.darkMode') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="list-group-item px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="font-weight-bold mb-1">{{ $t('appearance.profileLayout') }}</p>
                            <p class="small text-muted mb-0"></p>
                        </div>

                        <div class="btn-group btn-group-sm">
                            <button
                                class="btn"
                                :class="[ profileLayout == 'grid' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleProfileLayout('grid')">
                                {{ $t('appearance.grid') }}
                            </button>
                            <button
                                class="btn"
                                :class="[ profileLayout == 'masonry' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleProfileLayout('masonry')">
                                {{ $t('appearance.masonry') }}
                            </button>
                            <button
                                class="btn"
                                :class="[ profileLayout == 'feed' ? 'btn-primary' : 'btn-outline-primary']"
                                @click="toggleProfileLayout('feed')">
                                {{ $t('appearance.feed') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="list-group-item px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="font-weight-bold mb-0">{{ $t('appearance.compactPreviews') }}</p>
                        </div>
                        <b-form-checkbox v-model="fixedHeight" switch size="lg" />
                    </div>
                </div>

                <div class="list-group-item px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="font-weight-bold mb-0">{{ $t('appearance.loadComments') }}</p>
                        </div>
                        <b-form-checkbox v-model="autoloadComments" switch size="lg" />
                    </div>
                </div>

                <div class="list-group-item px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="font-weight-bold mb-0">{{ $t('appearance.hideStats') }}</p>
                        </div>
                        <b-form-checkbox v-model="hideCounts" switch size="lg" />
                    </div>
                </div>

            </div>
        </b-modal>
    </nav>
</template>

<script type="text/javascript">
    import Autocomplete from '@trevoreyre/autocomplete-vue'
    import '@trevoreyre/autocomplete-vue/dist/style.css'

    export default {
        components: {
            Autocomplete
        },

        data() {
            return {
                brandName: 'pixelfed',
                user: window._sharedData.user,
                profileLayoutModel: 'grid',
                hasLocalTimeline: true,
                config: window.App.config,
                hasNetworkTimeline: false
            }
        },

        computed: {
            profileLayout: {
                get() {
                    return this.$store.state.profileLayout;
                },

                set(val) {
                    this.$store.commit('setProfileLayout', val);
                }
            },

            hideCounts: {
                get() {
                    return this.$store.state.hideCounts;
                },

                set(val) {
                    this.$store.commit('setHideCounts', val);
                }
            },
            autoloadComments: {
                get() {
                    return this.$store.state.autoloadComments;
                },

                set(val) {
                    this.$store.commit('setAutoloadComments', val);
                }
            },
            newReactions: {
                get() {
                    return this.$store.state.newReactions;
                },

                set(val) {
                    this.$store.commit('setNewReactions', val);
                }
            },

            fixedHeight: {
                get() {
                    return this.$store.state.fixedHeight;
                },

                set(val) {
                    this.$store.commit('setFixedHeight', val);
                }
            },

            uiColorScheme: {
                get() {
                    return this.$store.state.colorScheme;
                },

                set(val) {
                    this.$store.commit('setColorScheme', val);
                }
            }
        },

        mounted() {
            if(window.App.config.features.hasOwnProperty('timelines')) {
                this.hasLocalTimeline = App.config.features.timelines.local;
                this.hasNetworkTimeline = App.config.features.timelines.network;
            }

            let u = new URLSearchParams(window.location.search);
            if(u.has('q') && u.get('q') && u.has('src') && u.get('src') === 'ac') {
                this.$refs.autocomplete.setValue(u.get('q'));
                setTimeout(() => {
                    let ai = document.querySelector('.autocomplete-input')
                    ai.focus();
                }, 1000)
            }

            this.brandName = window.App.config.site.name;
        },

        methods: {
            autocompleteSearch(q) {
                if (!q || q.length < 2) {
                    return [];
                }

                let resolve = q.startsWith('https://') || q.startsWith('@');

                return axios.get('/api/v2/search', {
                    params: {
                        q: q,
                        resolve: resolve,
                        '_pe': 1
                    }
                }).then(res => {
                    let results = [];
                    let accounts = res.data.accounts.map(res => {
                        let account = res;
                        account.s_type = 'account';
                        return account;
                    });
                    let hashtags = res.data.hashtags.map(res => {
                        let tag = res;
                        tag.s_type = 'hashtag';
                        return tag;
                    })

                    results.push(...accounts.slice(0,5));
                    results.push(...hashtags.slice(0,5));

                    if(res.data.statuses) {
                        if(Array.isArray(res.data.statuses)) {
                            let statuses = res.data.statuses.map(res => {
                                let status = res;
                                status.s_type = 'status';
                                return status;
                            });
                            results.push(...statuses);
                        } else {
                            if(q === res.data.statuses.url) {
                                this.$refs.autocomplete.value = '';

                                this.$router.push({
                                    name: 'post',
                                    path: `/i/web/post/${res.data.statuses.id}`,
                                    params: {
                                        id: res.data.statuses.id,
                                        cachedStatus: res.data.statuses,
                                        cachedProfile: this.user
                                    }
                                });
                            }
                        }
                    }
                    return results;
                });
            },

            getSearchResultValue(result) {
                return result;
            },

            onSearchSubmit(result) {
                if (result.length < 1) {
                    return;
                }
                this.$refs.autocomplete.value = '';
                switch(result.s_type) {
                    case 'account':
                        location.href = `/i/web/profile/${result.id}`;
                    break;

                    case 'hashtag':
                        location.href = `/i/web/hashtag/${result.name}`;
                    break;

                    case 'status':
                        location.href = `/i/web/post/${result.id}`;
                    break;
                }
            },

            truncate(text, limit = 30) {
                if(text.length <= limit) {
                    return text;
                }

                return text.slice(0, limit) + '...'
            },

            timeAgo(ts) {
                return window.App.util.format.timeAgo(ts);
            },

            formatCount(val) {
                if(!val) {
                    return 0;
                }

                return new Intl.NumberFormat('en-CA', { notation: 'compact' , compactDisplay: "short" }).format(val);
            },

            logout() {
                axios.post('/logout')
                .then(res => {
                    location.href = '/';
                }).catch(err => {
                    location.href = '/';
                })
            },

            openUserInterfaceSettings() {
                event.currentTarget.blur();
                this.$refs.uis.show();
            },

            toggleUi(ui) {
                event.currentTarget.blur();
                this.uiColorScheme = ui;
            },

            toggleProfileLayout(layout) {
                event.currentTarget.blur();
                this.profileLayout = layout;
            }
        }
    }
</script>

<style lang="scss">
    .metro-nav {
        z-index: 4;

        .dropdown-menu {
            min-width: 18rem;
            padding: 0;
            border: none;

            .nav {
                overflow: auto;
            }

            .nav-item {
                .nav-link {
                    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
                    font-weight: 500;
                    color: rgba(156,163,175, 1);
                    padding-left: 14px;
                    margin-bottom: 5px;

                    .icon {
                        display: inline-block;
                        width: 40px;
                        text-align: center;
                    }

                }

                .router-link-exact-active {
                    color: var(--primary);
                    font-weight: 700;
                    padding-left: 14px;

                    &:not(.text-center) {
                        padding-left: 10px;
                        border-left: 4px solid var(--primary);
                    }

                    .icon {
                        color: var(--primary) !important;
                    }
                }

                &.nav-icons {
                    .small {
                        font-weight: 700 !important;
                    }
                }

                &:is(:last-child) {
                    .nav-link {
                        margin-bottom: 0;
                        border-bottom-left-radius: 15px;
                        border-bottom-right-radius: 15px;
                    }
                }
            }
        }

        .fa-layers {
            display: inline-block;
            height: 1em;
            position: relative;
            text-align: center;
            vertical-align: -0.125em;
            width: 1em;

            .fa-layers-counter {
                background-color: #ff253a;
                border-radius: 1em;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #fff;
                height: 1.5em;
                line-height: 1;
                max-width: 5em;
                min-width: 1.5em;
                overflow: hidden;
                padding: 0.25em;
                right: 0;
                text-overflow: ellipsis;
                top: 0;
                transform: scale(.5);
                -webkit-transform-origin: top right;
                transform-origin: top right;

                display: inline-block;
                position: absolute;

                margin-right: -5px;
                margin-top: -10px;
            }

            .far {
                bottom: 0;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        .searchbox {
            @media (min-width: 768px) {
                width: 300px;
            }
        }

        .nav-avatar {
            @media (min-width: 768px) {
                width: 50px;
                height: 50px;
            }
        }

        .autocomplete[data-loading="true"]::after {
            content: "";
            border-right: 3px solid var(--primary);
        }

        .autocomplete {
            &-input {
                padding: 0.375rem 0.75rem 0.375rem 2.6rem;
                background-color: var(--light-gray);
                font-size: 0.9rem;
                border-radius: 50rem;
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjhDMkNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNSIvPjxwYXRoIGQ9Ik0xOSAxOWwtNC00Ii8+PC9zdmc+");
                box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
            }

            &-result {
                background-image: none;
                padding: 10px 12px;
                cursor: pointer;

                &-list {
                    box-shadow: 0 0.125rem 0.45rem var(--border-color);
                    -ms-overflow-style: none;
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        width: 0 !important
                    }
                }

                .media-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    margin-right: 12px;
                    background: var(--light-gray);
                    border: 1px solid var(--input-border);
                    border-radius: 40px;
                    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
                }

            }
        }

        .sr {
            &:not(:last-child) {
                border-bottom: 1px solid var(--input-border);
            }

            &-avatar {
                margin-right: 12px;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
            }

            &-account {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 3px;

                &-acct {
                    word-wrap: break-word;
                    word-break: break-all;
                    font-size: 14px;
                    line-height: 18px;
                    font-weight: bold;
                    color: var(--dark);
                    margin-right: 1rem;

                    &.compact {
                        font-size: 12px;
                    }
                }

                &-stats {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    line-height: 14px;

                    &-followers,
                    &-statuses {
                        font-size: 11px;
                        font-weight: 500;
                        color: var(--text-lighter);
                    }
                }
            }

            &-tag {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 3px;

                &-name {
                    word-wrap: break-word;
                    word-break: break-all;
                    font-size: 14px;
                    line-height: 18px;
                    font-weight: bold;
                    color: var(--dark);
                    margin-right: 1rem;

                    &.compact {
                        font-size: 12px;
                    }
                }

                &-count {
                    font-size: 11px;
                    line-height: 13px;
                    color: var(--text-lighter);
                    font-weight: bold;
                }
            }

            &-post {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 3px;

                &-acct {
                    font-size: 14px;
                    line-height: 18px;
                    font-weight: bold;
                    color: var(--dark);
                }

                &-action {
                    display: flex;
                    font-size: 11px;
                    line-height: 14px;
                    color: var(--text-lighter);
                    font-weight: 500;
                    gap: 3px;
                    align-items: center;

                    &-timestamp {
                        font-weight: 700;
                    }

                    &-label {
                        font-weight: 700;
                    }
                }
            }
        }
    }

    .force-dark-mode {
        .autocomplete-result-list {
            border-color: var(--input-border);
        }

        .autocomplete-result:hover, .autocomplete-result[aria-selected=true] {
            box-shadow: 0;
            background-color: rgba(255, 255, 255, .1);
        }

        .autocomplete[data-loading="true"]::after {
            content: "";
            border: 3px solid rgba(255, 255, 255, 0.22);
            border-right: 3px solid var(--primary);
        }
    }
</style>
