// // Dropdowns //

.dropdown-toggle {

outline: 0;

}

.dropdown-menu {

@include shadow;
padding: 0;

}

.dropdown-item {

@include transition;
font-size: $font-size-sm;

&:first-child { @include border-top-radius($card-inner-border-radius); }
&:last-child { @include border-bottom-radius($card-inner-border-radius); }

&:active {
        span {
                color: $white;
        }

        color: rgba($white, .5);
}

span {
        color: $gray-800;
        font-size: $font-size-base;
}

}

.dropdown-divider {

margin: 0;

}

// animate dropdown inside navbar .navbar {

@include media-breakpoint-up(lg) {
        .dropdown-menu {
                &.show {
                        animation: dropdown .2s ease forwards;
                }
        }
}

}

@keyframes dropdown{

0%{ opacity: 0; transform: translateY(-1rem); }
100%{ opacity: 1; transform: translateY(0); }

}

// mega dropdown .dropdown-mega {

position: static;

.dropdown-menu {
        top: 85px;
        width: 100%;

        > .row {
                margin-right: 0;
                margin-left: 0;

                > [class*="col"] {
                        padding-top: ($grid-gutter-width / 2);
                        padding-bottom: ($grid-gutter-width / 2);

                        &:not(:first-child) {
                                border-left: $border-width solid $border-color;
                        } 
                }
        }
}

}

.mega-title {

display: block;
padding: 0 $dropdown-item-padding-y;
margin-bottom: .5rem;
color: $canalplus;
letter-spacing: $letter-spacing;
font-size: $font-size-sm;
text-transform: uppercase;

}

.mega-list {

margin: 0;
padding: 0;
list-style: none;

li {
        a {
                @include transition;
                @include border-radius;
                display: block;
                font-size: $font-size-sm;
                padding: $dropdown-item-padding-y;
                color: $gray-300;

                &:hover {
                        background-color: rgba($canalplus, .05);
                }

                &.highlight {
                        border: $border-width solid $border-color;
                }
        }
}

}