$color-apps-border: #65a6ff;

$color-nav-shadow: rgba(26, 93, 184, .26);

.nav {
    & {
        flex-direction: row;
    }

    .nav-item {
        .nav-link {
            & {
                @include border-radius;
                @include box-shadow-outer(0, 2px, 4px $color-nav-shadow);
                background: $color-theme-blue;
                border: 1px solid $color-theme-blue-lighter;
                color: $color-dark-foreground;
                cursor: pointer;
                line-height: 1.25rem;
                min-width: 150px;
                opacity: .95;
                padding-left: 1rem;
                padding-right: 2rem;
                transition: opacity .4 ease;
                user-select: none;
            }

            &:hover {
                opacity: 1;
            }

            &::after {
                @include absolute(45%, 1rem, auto, auto);
            }
        }
    }
}

.dropdown {
    &-button {
        padding: 1rem 1.5rem;
    }

    &-item {
        border-radius: 0;
    }
}

.btn-block {
    white-space: nowrap;
}

.icon-plus {
    font-size: .8rem;
}

.apps-list {
    margin: -.5rem 0;
    max-height: 600px;
    overflow-y: auto;
}

.all-apps {
    & {
        position: relative;
    }

    &-text {
        font-weight: bold;
    }

    &-pill {
        @include absolute(.5rem, .625rem, auto, auto);
    }
}

.app-upgrade {
    & {
        margin-left: 2rem;
        margin-right: 0;
        vertical-align: top;
    }

    .btn {
        padding: .375rem;
    }

    .btn-plan {
        padding: .375rem 1rem;
    }

    .btn-warning {
        color: $color-dark-foreground;
    }

    .btn-primary {
        @include box-shadow-outer;
        background: $color-theme-blue-dark;
        border: 0;
        pointer-events: none;
    }

    @media (max-width: 1400px) {
        display: none;
    }
}