/* Compact text-only top app menu */

:root {
    --external-link-width: 105px;
    --external-link-label-width: 98px;
}

/* Keep the app menu from running into the right-side toolbar/settings area */
nav.app-menu {
    max-width: calc(100vw - 360px) !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

nav.app-menu .app-menu-main {
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

/* Compact each top-bar entry */
nav.app-menu .app-menu-main .app-menu-entry {
    width: var(--external-link-width) !important;
    min-width: var(--external-link-width) !important;
    max-width: var(--external-link-width) !important;
    flex: 0 0 var(--external-link-width) !important;
    overflow: hidden !important;
}

/* Compact clickable area */
nav.app-menu .app-menu-main .app-menu-entry a {
    width: var(--external-link-width) !important;
    min-width: var(--external-link-width) !important;
    max-width: var(--external-link-width) !important;
    overflow: hidden !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Hide normal icon/label layout */
nav.app-menu .app-menu-main .app-menu-entry .app-menu-entry--label,
nav.app-menu .app-menu-main .app-menu-entry svg,
nav.app-menu .app-menu-main .app-menu-entry img,
nav.app-menu .app-menu-main .app-menu-entry .app-icon {
    display: none !important;
}

/* Show compact text from aria-label */
nav.app-menu .app-menu-main .app-menu-entry a::after {
    content: attr(aria-label);
    display: block !important;

    width: var(--external-link-label-width) !important;
    max-width: var(--external-link-label-width) !important;
    margin: 0 auto !important;

    font-size: 11px !important;
    line-height: 50px !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    pointer-events: none !important;
}

/* On mobile/narrow screens, revert app menu to normal icon behavior */
@media (max-width: 800px) {
    nav.app-menu {
        max-width: none !important;
        overflow: visible !important;
    }

    nav.app-menu .app-menu-main .app-menu-entry,
    nav.app-menu .app-menu-main .app-menu-entry a {
        width: var(--header-height, 50px) !important;
        min-width: var(--header-height, 50px) !important;
        max-width: var(--header-height, 50px) !important;
        flex: 0 0 var(--header-height, 50px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    nav.app-menu .app-menu-main .app-menu-entry svg,
    nav.app-menu .app-menu-main .app-menu-entry img,
    nav.app-menu .app-menu-main .app-menu-entry .app-icon {
        display: initial !important;
    }

    nav.app-menu .app-menu-main .app-menu-entry a::after {
        display: none !important;
        content: none !important;
    }
}