//
// Navbar overlay
//

.navbar-expand {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        &#{$infix} {
            @include media-breakpoint-down($breakpoint) {
                .navbar-collapse-overlay {
                    position: absolute;
                    top: 0;
                    right: 0;
                    left: 0;
                    width: calc(100% - 2rem);
                    padding-top: 1.25rem;
                    padding-bottom: 1.25rem;
                    margin: 1rem;
                    background: $navbar-collapse-overlay-bg;
                    box-shadow: $box-shadow-lg;
                    border-radius: $border-radius;
                    opacity: 0;


                    &.collapsing,
                    &.show {
                        transition-property: opacity,transform;
                        transform-origin: top right;
                        @include transition(all $transition-base-duration ease-in-out);
                        @include box-shadow($box-shadow-lg);
                        @include border-radius($border-radius);
                    }

                    &.collapsing {
                        opacity: 0;
                        transform: scale(.9);
                    }

                    &.show {
                        opacity: 1;
                        transform: scale(1);
                    }

                    .navbar-nav  {
                        .nav-item {
                            padding: 0 1.5rem;

                            .nav-link {
                                color: $navbar-collapse-nav-link-color;
                            }
                        }

                        .dropdown-item {
                            color: $navbar-collapse-dropdown-item-color;
                        }
                    }

                    .navbar-toggler {
                        position: absolute;
                        top: 0;
                        right: .5rem;
                        color: $navbar-collapse-nav-link-color;
                        z-index: 100;
                    }
                }
            }
        }
    }
}

// Keyframes

@keyframes show-navbar-collapse {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}