/* -----------------------------------------
   NAVIGATION 
   /src/styles/components/navigation.scss
----------------------------------------- */
header.global-header .navigation {
    .container{
        padding-left: 0;
        padding-right: 0;

        .nav-item {
            line-height: var(--bs-body-line-height, $line-height-base);
            align-self: baseline;
            text-align: left;
            
            a {
                font-size: var(--bs-nav-link-font-size); 
                
                &:active,
                &.active,
                &[aria-current="page"]{
                    color: var(--bs-dropdown-link-hover-color);
                    background-color: var(--bs-dropdown-link-hover-bg);
                }

                &:hover,
                &:focus {
                    background-color: var(--bs-gray-75, $gray-75);
                }

                &:focus {
                    @include outline(2px);
                    outline-offset: -2px;
                }

                &.dropdown-toggle {
                    &::after{
                        font-family: 'CaGov';
                        border: none;
                        vertical-align: baseline;
                        content: "3";

                        transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
                    }
                    &.show::after{
                        transform: rotate(180deg);

                    }
                }
            }
    
            // Dropdown Sub navigation 
            .dropdown-menu{
                width: auto;
                border-top: 0;
                border-radius: 0;
                box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
                background: var(--bs-white, $white);
                padding: 0;
                height: auto;
                max-height: 500px;
                overflow-y: auto;

                &.show{
                    visibility: visible;
                    opacity: 1;
                }

                .link-description{
                    color: var(--bs-gray-700, $gray-700);
                    font-size: $nav-link-font-size * .85;
                }
            }
        }
    }
}