/**
 * Copyright (c) 2019 Oracle and/or its affiliates. All rights reserved.
 */

/* NOTE: Do NOT change any styles in this file as it will change the look and feel of this Custom 
    Component across ALL Themes/Sites.

    Instead, copy the specific styles being overridden into the designs.css file of the Theme and 
    prefix it with .navMenu-default-style.
        Example
            Add the following to your Theme's design.css file to override the dropdown menu 
            background color:
                .navMenu-default-style .dropdown-menu {
                    background-color: blue;
                }

    Or create a new style(s)) and prefix by that name instead, allowing the default style to remain 
    untouched. But this new style name also needs to be added to the design.json file for it to be 
    exposed/selectable by the end user in the Sites editor.
        Example
            Add the following to your Theme's design.css file to allow for the dropdown menu 
            background color to be manually overridden:
                .navMenu-blue-style .dropdown-menu {
                    background-color: blue;
                }
            Add the following in your Theme's design.json file to expose this new style in the Sites 
            editor:
                "navMenu": {
                    "styles": [
                        {
                            "name": "Blue",
                            "class": "navMenu-blue-style"
                        }           
                    ]
                }        
            In this case, once the NavMenu component has been dropped onto a Site page the user can 
            go into the styles of the component and select "Blue" to change the background color.
*/

/* NavMenu Default Color Styles */
.navbar-nav .nav-link {
    color: #ffffff;
}
.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
    color: #ffffff;
    background-color: #38362d;    
}
.navbar-nav .active > .nav-link, 
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #d3c36e;
}
.dropdown-menu {
    background-color: #262626;
}
.dropdown-item {
    color: #ffffff;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: #ffffff;
    background-color: #38362d;
}
.dropdown-item.active {
    color: #d3c36e;
    background-color: transparent;
}
.dropdown-item.active:hover {
    background-color: #38362d;
}
.currParent, 
.navbar-nav .currParent .nav-link{
    color: #0188cc;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,192,192,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,192,192,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler.collapsed .navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,192,192,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* NOTE: The 767.98px is needed for Windows 10 display in scaled mode to work correctly with Bootstrap 4 */
@media (max-width: 767.98px) {
    .navbar-nav {
        background-color: #262626;
    }
    .navbar-nav .active > .nav-link, 
    .navbar-nav .show > .nav-link,
    .navbar-nav .nav-link.active, 
    .navbar-nav .nav-link.show {
        color: #d3c36e;
    }
}
/* End NavMenu Default Color Styles */


/* Core Styles */
.navbar {
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    z-index: 100;
}
.nav-link {
    padding: 24px 1.5vw;
    outline-width: 0;
}
.navbar-toggler:focus {
    outline-width: 0;
}
.navbar-toggler {
    border-width: 0;
    padding: 0;
    margin-top: 21px;
    margin-bottom: 21px;
    margin-right: 21px;
}
.dropdown-menu {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-radius: 0;
}
.dropright .dropdown-menu {
    margin: 0;
}
.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.nav-link:after {
    display: none;
}
.dropdown-item {
    font-weight: 400;
    padding: 10px 20px;
    outline-width: 0;
}
.dropdown-submenu a::after {
    position: absolute;
    right: 6px;
    margin: 8px;
}

/* NOTE: The 767.98px is needed for Windows 10 display in scaled mode to work correctly with Bootstrap 4 */
@media (max-width: 767.98px) {
    .navbar-nav {
        float: none;
    }
    .navbar-collapse {
        position: initial;
        right: 0;
        top: 72px;
        margin-top: -19px;
    }
    .dropdown-menu {
        display: block;
    }
    .nav-link {
        padding: 10px 20px;
    }

    /* Indent submenu in the dropdown menu based on its current level */
    .dropdown-menu .dropdown-item {
        padding-left: 40px;      
    }
    .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 60px;      
    }
    .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 90px;      
    }
    /* End indent */

    .dropdown-item.dropdown-toggle:after {
        display: none;
    }    
}
/* End Core Styles */