/**
 * Salaxy-navi is the styling for easy creation of responsive sample sites.
 * It is designed to work together with Navi-part of the Angular framework: 
 * NaviService, NaviController and components on top of them.
 * 
 * NOTE: This is just an optional helper to make creating simple demo sites easier.  
 * You can use something completely different.
 *
 * @example
 * This is the basic structure:
 * 
 * .salaxy-navi-page-container - 
 *	- .salaxy-navi-sm-opened -   
 *	
 *	nav.salaxy-navi-sidebar
 *	
 *	header.salaxy-navi-header
 *	
 *	main.salaxy-navi-main
 */

.salaxy-navi-page-container {
  h1, h2, h3, h4, h5 {
    // TODO: Consider is this too agressive.  Should use @headings-font-weight for easier customization
    font-weight: @headings-font-weight;
  }
  h1 {
    // TODO: These are now too agressive. Should be restricted to main header only, but that probably needs HTML changes.
    font-size: 42px;
  }
  .salaxy-navi-header-default {
    color: @salaxy-header-text;
    background: @salaxy-navi-header-bg;
    .dropdown-menu{
      left:unset;
      right:0;
    }
  }
  .salaxy-navi-header-horizontal {
    color: @navbar-horizontal-navbar-color;
    background: @navbar-horizontal-navbar-bg;

    //color: @navbar-horizontal-link-color;
    //background: @navbar-horizontal-link-bg;
    
    .navbar-nav > {

      >li{ 
        > a, a.visited{
          color: @navbar-horizontal-link-color;
          background-color: @navbar-horizontal-link-bg;
          &:hover, &:focus{
            background-color: @navbar-horizontal-link-hover-bg;
            color:@navbar-horizontal-link-hover-color;
          }
        }
        .dropdown-menu{
          background-color:@navbar-dropdown-menu-bg;
          >li{
            > a, >a:focus, >a:visited{
              
              color: @navbar-dropdown-menu-color;
              background-color:@navbar-dropdown-menu-bg;
              &:hover{
                color: @navbar-dropdown-menu-hover-color;
                background-color:@navbar-dropdown-menu-hover-bg;
              }
            }
          }
          
        }
        &.active{
          > a{
            text-decoration:underline;
          }
        }
      }
      li.dropdown.open{
        > a,  >a:focus{
          color: @navbar-dropdown-open-color;
          background-color:@navbar-dropdown-open-bg;
        }
      }
    }
   .navbar-collapse{
    clear: both;
   }
   
  
   .navbar-toggle{
    margin-right: 0;
   }
   .page-title-sm{
    margin-top:15px;
    font-size:13px;
   }
  }
  .breadcrumb-container{
    padding-left:40px; 
    margin-top:15px;
   }
  .page-header {
    font-size: 52px;
    font-weight: 300;
    color: @brand-primary;
  }
  .mobile-login-container{
    padding-bottom:10px;
  }
}


/**
 * Main container that defines the responsive area.
 * Tested in either body or div element
 */
.salaxy-navi-page-container {
    padding-left: @salaxy-navi-sidebar-width;
    &.iframe-container{
      padding:0;
      
    }
    /* 
     * Sidebar that typically contains the navigation
     * By default, it is on the left, hidden in small screens. 
     * By click of a "hamburger"-button it then toggles visible also on small screens. 
     */
    .salaxy-navi-sidebar {
        position: fixed;
        z-index: 1010;
        top: 0;
        left: 0;
        width: @salaxy-navi-sidebar-width;
        height: 100%;
        overflow-y: auto;
        background: @salaxy-navi-sidebar-bg;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;

        .salaxy-logo-container{ 
          height: @salaxy-navi-header-height;
          background-color: @salaxy-navi-logo-bg;
          padding:5px 10px;
          a{
            background-color:transparent;
            background-image:url("@{salaxy-navi-logo}");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            height: calc(~'@{salaxy-navi-header-height} - 10px');
            display: block;
            width: 100%;
            margin: auto;
          }
          img {
            display: block;
            max-width: calc(~"100% - 20px");
            margin:auto;
            max-height:@salaxy-navi-header-height;
            padding:5px 10px;
          }
        }
        .list-group{
          position:relative;
          z-index:100; 
        }
        li {
            list-style: none;
            a {
                display: block;
                text-decoration: none;
                color: #666;
                &.active{
                  font-weight:bold;
                }
            }
            a:hover, a:active, a:focus {
                text-decoration: none;
                color: @brand-primary;
            }
        }
        .dropdown-menu{
          max-width:230px;
          li{
              padding:0;
              max-width:calc(~'@{salaxy-navi-sidebar-width} - 20px');
          }
          .btn{
              max-width:calc(~'@{salaxy-navi-sidebar-width} - 20px');
              overflow:hidden;
              border:none;
              padding:10px 10px;
              text-overflow:ellipsis;
              .salaxy-login-button-text{
                  font-size:13px;
                  text-overflow:ellipsis;
              }
          }
          
      }
        li.list-group-item {
            padding: 0px 0px;
            > a {
                padding: 10px 15px;
            }
            > a:hover {
                color: #fff;
                background: #666;
            }
            ul {
                padding-bottom: 10px;
            }
        }
        .poweredby{
          text-align:center;
          position: absolute;
          bottom: 6px;
          visibility:@poweredby-visibility;
          width: 90%;
          margin:auto;
          z-index:90;
         
          .poweredby-image{
            text-align:center;
            width: 60%;
            height: 18px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("@{poweredby-logo-path}");
            display: block;
            margin:auto;
          }   
      }
    }

    .salaxy-navi-header-default {
        width: 100%;
        height: @salaxy-navi-header-height;
        
        line-height: @salaxy-navi-header-height;
        .page-title{
          
          max-width:calc(~"100% - 150px");
          
          margin-bottom:0px;
          line-height:1.2;
          margin-top:0;
          display: inline-block;
          vertical-align: middle;
      }
    }

    .salaxy-navi-header-mobile {
        display: none;
        position: fixed;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        z-index: 1009;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 15px;
        background: #FFF;
        h1 {
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            @media screen and (max-width:@screen-xs-max){
              font-size: 25px;
            }
            @media screen and (max-width:480px){
                  font-size:21px;
              }
        }
        .hamburger {
            z-index: 1100;
        }
    }
    /* Main container for the page */
    .salaxy-navi-main-container {
        width: 100%;
        position: relative;
        padding-bottom:70px;
        .container {
            width: calc(~'100% - @{grid-gutter-width}');
            @media screen and (max-width:768px){
                width: calc(~'100% - 18px');
            }
            @media screen and (max-width:480px){
                width: calc(~'100% - 0px');
            }
            @media (min-width: @screen-lg-min) {
                width: calc(~'@{container-lg} - @{salaxy-navi-sidebar-width}');
            }
        }
    }
}

.salaxy-navi-sitemap, .salaxy-navi-sidebar{
  
  .salaxy-navi-3-level ul {
    padding-inline-start: 26px;
  }
}

/* Mobile layout */
@media(max-width: @screen-sm-max) {

    .salaxy-navi-page-container {
        padding-left: 0;

        .salaxy-navi-header-mobile {
            display: block;
        }

        .salaxy-navi-header-default {
            display: none;
        }

        .salaxy-navi-sidebar {
            width: @salaxy-navi-sidebar-width;
            margin-left:-@salaxy-navi-sidebar-width;
        }

        .salaxy-navi-main-container {
            margin-top: 65px;
        }
        /** This class should be present in the salaxy-navi-page-container if the sidebar is open in small screens   */
        &.salaxy-navi-sm-opened {
            .salaxy-navi-sidebar {
                width: @salaxy-navi-sidebar-width;
                margin-left:0;
            }
        }
        &.iframe-container{
          .salaxy-navi-header-default {
            display: block;
            .page-title{
              max-width:calc(~"100% - 30px");
            }
          }
          .salaxy-navi-main-container {
            margin-top: 0px;
          }
        }
      
    }
}