// Navbar apps search
.navbar-applications-search {
    position: relative;

    .navbar-application-search-input {
        background: $gray-200;
        color: $gray-800;
        padding-left: 35px;
        border: none;
        border-radius: 10rem;

        &:focus {
            background: $gray-200;
            box-shadow: none;
        }
    }


    // shared styling between search icon and reset button
    .navbar-applications-search-icon,
    .navbar-applications-search-reset {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: 0;
        line-height: 1;
        color: $gray-800;
        padding: 7px 9px;
        font-size: 18px;
    }

    // search icon styling
    .navbar-applications-search-icon {
        left: 0;
    }

    // reset button styling
    .navbar-applications-search-reset {
        right: 0;
        text-decoration: none;
    }
}

// Navbar apps wrapper structure

.dropdown-menu.navbar-applications {
    padding: 1rem;

    @include media-breakpoint-only(md) {
        right: -160px;
    }
}

.navbar-applications .app-wrapper-list {
    min-width: 640px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(117px, 1fr));
    gap: 2px;

    // Navbar application styling - mobile
    @include media-breakpoint-down(sm) {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }

    // Navbar app divider
    .divider {
        width: 100%;
        height: 0;
        margin: 0;
        border-top: 1px solid $gray-300;
        grid-column: 1/-1;
    }
}

// Navbar application styling
.navbar-application {
    white-space: nowrap;
    text-align: center;
    text-decoration: none;

    // Navbar application styling - link
    .app-icon-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 3px;
        margin: .25rem .32rem;
        border-radius: $application-icon-border-radius;

        // Navbar application styling - icon
        .app-icon-glyphicon, .app-icon-svg {
            color: var(--theme-app-color);
            font-size: 2.2rem;
            padding: .1rem;
            line-height: 1;
            vertical-align: top;
        }

        // Navbar application styling - text
        .app-icon-title {
            font-size: 13px;
            margin-top:  .5rem;
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
            color: $gray-800;
            max-width: 100%;
        }

        .app-icon-title-inner {
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
        }
    }
}


// Navbar application styling - hover & focus
.navbar-application .app-icon-link {
    &:hover, &:focus {
        text-decoration: none;
        opacity: 1;
        background: $gray-100;
    }
}

// Navbar apps wrapper structure - mobile
@include media-breakpoint-down(sm) {
    .navbar-applications-search-wrapper {
        padding: $mobile-menu-item-padding-x $mobile-menu-item-padding-y;
        border-top: 1px solid $mobile-menu-border-color;
    }
}

// Navbar apps wrapper structure - mobile
@include media-breakpoint-down(sm) {
    .navbar-applications .app-wrapper-list {
        width: 100%;
        min-width: 100%;
        max-height: 100%;
        // Hides additional submenu header
        .submenu-header {
            display: none !important;
        }
    }
}

// Navbar apps admin button
.navbar-applications-admin-section {
    border-top: 1px solid $gray-300;
}
