@import '_vars';
@import '_mixins';

$color-apps-border: #65a6ff;

.nav {
    & {
        @include flex-direction(row);
    }

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

            &:hover {
                @include opacity(1);
            }

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

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

    &-menu {
        @include absolute($size-navbar-height - .5rem, auto, auto, 0);
        margin: 0;
    }

    &-item {
        @include border-radius(0);
    }
}

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

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

.apps-list {
    max-height: 600px;
    margin: -.5rem 0;
    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-inner;
        background: $color-theme-blue-dark;
        border: 0;
        pointer-events: none;
    }
}