/*!
 * 
 * ##----------------------------------------------------------------##
 * 
 *           Delite design system components                                             
 *           Copyright (c) delite@softwareag.com     
 *           
 *           For license information check saglicense.txt           
 *           found in the root directory of the source tree.      
 * 
 * ##----------------------------------------------------------------##
 *     
 */
 @import "../variables";
 @import "../variables/nav_vars";
// @import "../variables/buttons_vars";
 @import "../mixins";


///////////////////////////////
//
// START HORIZONTAL NAV STYLES
//
//////////////////////////////
 
 
 .dlt-horizontal-nav {
    width: 100%;
    height: $nav-vertical-height;
    font-size: $nav-item-font-size-sm;
    color: $nav-color-text;
    position: absolute;
    top: 0;
    left: 0;
    background-color: $nav-horizontal-background;
    display:flex;
    justify-content: space-between;
    align-items: center;
    &.with-shadow {
        box-shadow: $nav-elevation;
    }
    &.with-stroke {
        border-bottom: 1px solid $nav-wrapper-bottom-border-color;
        justify-content: flex-end;
    }
    &.is-front {
        z-index: 11;
    }

    .product-logo {
        display: flex;
        height: 32px;
        width: 240px;
        padding: 0 0 0 $nav-item-spacing-xxl;
        .product-icon {
            height: 32px;
            width: 32px;
            margin: $nav-item-spacing-l $nav-item-spacing-s $nav-item-spacing-l $nav-item-spacing-xl;
        }
    }

    .horizontal-nav--wrapper {
        display: flex;
        align-items: center;
        height: 100%;
        list-style: none; 
        margin: 0;
        padding: 0;
        flex: 2;
    }
    .dlt-horizontal-nav--item {
        display: block;
        position: relative;
        float: left;
        background-color: $nav-horizontal-item-background-default;
        height: 100%;

        &[aria-expanded="true"] > .sub-menu--list {
            display:block;
            position:absolute;
            top: 64px;
            left: 4px;
        }

        a{
            display: flex;
            align-items: center;
            color: $nav-color-text;
            text-decoration: $nav-item-text-decoration;
            padding: 0 $nav-item-spacing-l;
            height: 100%;
        }

        // a:hover, a:focus{
        //   color: $nav-horizontal-item-text-hover-color;
        // }

        a:hover{
            color: $nav-horizontal-item-text-hover-color;
          }
  
        &:focus{
            // background: $nav-horizontal-item-background-hover;
            outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
            outline-offset: $nav-item-outline-offset;
        }

        a:active {
            background-color: $nav-item-active-color;
            outline: none;
            border: none;
        }
        
        &.second-level:hover > .sub-menu--list--third-level {
            display:block;
            position:absolute;
        }
    }
    .main-level {
         a {
            cursor: pointer;
            height: 100%;
            i {
                font-size: $nav-icon-size-xxl;
            }
            span {
                margin: 0 $nav-item-spacing-xs 0 $nav-item-spacing-s;
            }

            &:hover{
                background: $nav-horizontal-item-background-hover;
                // outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
                // outline-offset: $nav-item-outline-offset;
            }

            &:focus{
                // background: $nav-horizontal-item-background-hover;
                outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
                outline-offset: $nav-item-outline-offset;
            }

            &:active {
                background-color: $nav-item-active-color;
                outline: none;
                border: none;
            }

        }

        > a.aria-current-path {
            background-color: $nav-horizontal-item-background-selected;
            position: relative;
            font-weight: $nav-item-selected-font-weight ;
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: $nav-item-selected-left-border-with;
                background-color: $nav-item-border-color;
            }

            &:active {
                background-color: $nav-item-active-color;
            }
        } 

        > a[aria-expanded='true'] .dlt-icon-chevron-down{
            transform: rotate(180deg);
        }

        &.nav-item-selected {
            background-color: $nav-horizontal-item-background-selected;
            position: relative;
            font-weight: $nav-item-selected-font-weight ;
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: $nav-item-selected-left-border-with;
                background-color: $nav-item-border-color;
            }
        }
        &.dlt-icon-chevron-down {
            display: inline-block;
            margin: 0;
        }
        .dlt-chevron-transform {
            display: inline-block;
            transform: rotate(180deg);
        }
    }
    .sub-menu--list{
        display: none;
        //filter: drop-shadow(0px 0px 1px $nav-list-drop-shadow-color);
        box-shadow: $nav-horizontal-box-shadow;
        z-index: 3;
        min-width: 100%;
        width: auto;
        box-shadow: $nav-list-elevation;
        li {
            width:100%;
            background-color: $nav-horizontal-item-background-default;
            cursor: pointer;
            a {
                font-weight: 400;
                display: flex;
                justify-content: space-between;
                padding: $nav-item-spacing-m $nav-item-spacing-l;
                span {
                    white-space: nowrap;
                    margin: 0;
                    //line-height: 20px;
                }
                i {
                    font-size: $nav-icon-size-xxl;
                }

                &[aria-current], &.aria-current-path{
                    background-color: $nav-horizontal-item-background-selected;
                    font-weight: $nav-item-selected-font-weight;
                }
            }

            &.item-highlighted {
                background-color: $nav-horizontal-item-background-selected;
                a {
                    font-weight: $nav-item-selected-font-weight;
                }      
            }
            .sub-menu--list--third-level  {
                display: none;
                min-width: 100%;
                width: auto;
                box-shadow: $nav-list-elevation;
                list-style: none;
                padding: 0;
                z-index: 0;
                li{
                    a{
                        font-weight: 400;

                        &.nav-item-selected {
                            background-color: $nav-horizontal-item-background-selected;
                            position: relative;
                            font-weight: $nav-item-selected-font-weight ;
                        }

                        &[aria-current]{
                            background-color: $nav-horizontal-item-background-selected;
                            font-weight: $nav-item-selected-font-weight;
                        }

                    }
                    &.item-highlighted {
                        a {
                            font-weight: $nav-item-selected-font-weight !important;
                        } 
                    }
                }
            }
            
        }
        li:hover {
            background: $nav-horizontal-item-background-hover;
            // outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
            // outline-offset: $nav-item-outline-offset;
        }
        &.opened {
            display:block;
            position:absolute;
            top: 64px;
            left: 4px;
        }
    }
    .sub-menu--list {
        list-style: none;
        margin: 0;
        padding: 0px; 
        //min-width:10em;
        .sub-menu--list--third-level{
            left: 100%;
            top: 0;
            margin-left:1px;
        }
    }
}
// button {
//     i {
//         color: $nav-icon-button-color;
//     }
//     i:active {
//         background-color: $nav-icon-button-background-active;
//     }
// }

/////////////////////////////
//
// END HORIZONTAL NAV STYLES
//
/////////////////////////////

/////////////////////////////
//
// START VERTICAL NAV STYLES
//
////////////////////////////


 .dlt-vertical-nav {

    ul[role="tree"] {
        margin: 0;
        padding: 0;
        list-style: none;
        /* font-size: 120%; */
      }
    
      ul, ul ul, ul ul ul{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      
      ul[role="tree"] li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      
      [role="treeitem"][aria-expanded="false"] + [role="group"] {
        display: none;
      }
      
      [role="treeitem"][aria-expanded="true"] + [role="group"] {
        display: block;
      }
      
      
      [role="treeitem"][aria-expanded="false"] > ul {
        display: none;
      }
      
      [role="treeitem"][aria-expanded="true"] > ul {
        display: block;
      }
      
    
      [role="treeitem"],
      [role="treeitem"] span {
        display: block;
      }
      
      /* disable default keyboard focus styling for treeitems
         Keyboard focus is styled with the following CSS */
      [role="treeitem"]:focus {
        outline: 0;
      }

     height: 100%;
     width: 240px;
     position: relative;
     overflow: hidden;
     background-color: $nav-vertical-background;

     &.is-top {
         box-shadow: $nav-elevation;
     }
     &.is-not-top {
         border-right: $nav-border-width-default $nav-item-border-style $nav-list-border-color;
     }

     &.without-icons{
        .dlt-button-icon{
            transition: none;
        }
     }

     &.is-collapsed.without-icons{
         width: $nav-vertical-wo-icons-collapsed-width !important;
         box-shadow: none;

        .vertical-nav--outer-wrapper{
            display: none;
        }
       
        .collapse-item-wrapper {
            // bottom: 8px;
            .dlt-button-icon{
                margin-left: 0;
                margin-right: 8px;
                box-shadow: var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);
                height: 56px;
                width: 32px;
                border-radius: 0px 16px 16px 0px;
                border:0;
                outline: 0;

                // &:hover, &:focus{
                //     background-color: $nav-vertical-item-background-hover;
                //     // box-shadow: var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);
                //     // border: 2px solid $nav-expand-button-border-color;
                // }

                &:hover{
                    background-color: $nav-vertical-item-background-hover;
                    // box-shadow: var(--dlt-elevation-border, 0px 0px 0px transparent), var(--dlt-elevation-md, $shadow-depth-12);
                    // border: 2px solid $nav-expand-button-border-color;
                }
            }
        }
     }

     &.is-collapsed {
         width: $nav-vertical-collapsed-width !important;

         .chevron-icon, .product-logo{
            display: none!important;
         }

         .product-icon{
            display: block!important;
         }

        .collapse-item-wrapper .dlt-icon {
            transform: rotate(180deg);
        }

        .dlt-vertical-nav-list > li > ul{
            display: none;
        }

        .dlt-vertical-nav-list > li.li-current-path{
            border-bottom: 0 solid transparent!important;
        }

        .dlt-vertical-nav-list > li > .aria-current-path{
            border-top: 0 solid transparent!important;

            background-color: $nav-vertical-item-background-selected;
            position: relative;
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: $nav-item-selected-left-border-with;
                background-color: $nav-item-border-color;
            }
            &:hover {
                outline: none !important;
            }

        }



     }
     .vertical-nav--outer-wrapper {
         width: 100%;
         height: 100%;
         overflow-x: scroll;
         .vertical-nav--wrapper {
             min-height: 100%;
             width: 100%;
             display: flex;
             flex-direction: column;
             list-style: none;
             background-color: $nav-vertical-background;
             padding: 0 0 72px 0;
             .product-logo-wrapper {
                 display: flex;
                 height: 100%;
                 width: 100%;
                 margin-bottom: $nav-item-spacing-l;
                 .product-logo {
                     height: 32px;
                     margin: $nav-item-spacing-l $nav-item-spacing-s $nav-item-spacing-l $nav-item-spacing-xl;
                 }
                 .product-icon {
                     height: 32px;
                     width: 32px;
                     margin: $nav-item-spacing-l $nav-item-spacing-s $nav-item-spacing-l $nav-item-spacing-xl;
                 }
             }
             .dlt-vertical-nav-list {
                 padding: 0;
                 margin: 0;

                > li.li-current-path{
                    
                    border-bottom: $nav-item-border-width-hover $nav-item-border-style $nav-list-border-color;
                }

                > li.li-current-path > a{
                    border-top: $nav-item-border-width-hover $nav-item-border-style $nav-list-border-color;
                }
             }
         }
     }
 }

 
 .dlt-vertical-nav--item {
    //  display: block;
    //  justify-content: flex-start;
    //  align-items: center;
    //  height: $nav-item-height;
     background-color: $nav-vertical-item-background-default;
     
     &.first-level {
         font-size: $nav-item-font-size-sm;
         line-height: $nav-item-line-height;
         a {
             padding: 0 $nav-item-spacing-l 0 $nav-item-spacing-xxl;
         }
     }
     &.second-level {
         font-size: $nav-item-font-size-sm;
         a {
             padding: 0 $nav-item-spacing-l 0 $nav-item-indent-level1;
         }
     }
     &.third-level {
         font-size: $nav-item-font-size-xs;
         a {
             padding: 0 $nav-item-spacing-l 0 $nav-item-indent-level2;
         }
     }
     &.fourth-level {
         font-size: $nav-item-font-size-xs;
         a {
             padding: 0 $nav-item-spacing-l 0 $nav-item-indent-level3;
         }
     }
     i {
         font-size: $nav-icon-size-xxl;
         margin: 0 $nav-item-spacing-s 0 0;
     }
     .menu-item--link {
        cursor: pointer;
         display: flex;
         align-items: center;
         width: 100%;
         color: $nav-color-text;
         text-decoration: $nav-item-text-decoration;
         padding: 0 $nav-item-spacing-xxl 0 0;
         height: $nav-item-height;
         .menu-item--label {
             width: 100%;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             &.item-active {
                 font-weight: 500;
             }
         }
         i {
             font-size: $nav-icon-size-xxl;
         }
         &.has-sub-menu {
             //padding: 0 !important;
             .dlt-icon-chevron-down {
                 display: inline-block;
                 margin: 0;
             }
             .dlt-chevron-transform {
                 display: inline-block;
                 transform: rotate(180deg);
             }
         }
         .dlt-icon-chevron-down {
             display: none;
         }

        &:hover {
            color: $nav-vertical-item-text-hover-color;
            background-color: $nav-vertical-item-background-hover;
            // outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
            // outline-offset: $nav-item-outline-offset;
        }
        &:active {
            background-color: $nav-vertical-item-background-active;
        }
        &:focus {
            // background-color: $nav-vertical-item-background-active;
            outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
            outline-offset: $nav-item-outline-offset;
        }
        
     }
     
     &.menu-item-selected, a[aria-current][href], &[aria-current="page"] > a {
         background-color: $nav-vertical-item-background-selected;
         position: relative;
         &::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
             height: 100%;
             width: $nav-item-selected-left-border-with;
             background-color: $nav-item-border-color;
         }
         &:hover, &:active {
             outline: none !important;
         }

     }

     &.focus, &:focus >a{
        //color: $nav-vertical-item-text-hover-color;
        // background-color: $nav-vertical-item-background-active;
        outline: $nav-item-border-width-hover $nav-item-border-style $nav-item-border-color;
        outline-offset: $nav-item-outline-offset;
    }
     &.menu-item-selected,  &[aria-selected="true"] > a, .aria-current-path{
        font-weight: $nav-item-selected-font-weight ;
    }
 }
 
 .dlt-vertical-nav-list {
     &.sub-menu {
         height: 0;
         overflow: hidden;
         
     }
     &.open {
         height: auto !important;
     }
 }
 
.collapse-item-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: $nav-vertical-background;
    button {
        margin: $nav-item-spacing-l;
        width: $nav-collapse-icon-size;
        height: $nav-collapse-icon-size;
       
        i {
            font-size: $nav-icon-size-xxl;
            
            &.reverse-chevron {
                transform: rotate(180deg);
            }
        }
    }

}

.hide {
    display: none !important;
}

.add-border-top {
    border-top: $nav-item-border-width-hover $nav-item-border-style $nav-list-border-color;
}
.add-border-bottom {
    border-bottom: $nav-item-border-width-hover $nav-item-border-style $nav-list-border-color;
}

///////////////////////////
//
// END VERTICAL NAV STYLES
//
///////////////////////////


///////////////////////////
//
// EIcon Button Styles
//
///////////////////////////

nav {
    button {
        .dlt-icon {
            color: $nav-icon-button-color;
        }
    } 
}