//--------------------------------------------------------------
// Copyright (C) joomla-monster.com
// License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// Website: http://www.joomla-monster.com
// Support: info@joomla-monster.com
//---------------------------------------------------------------

// VARIABLES import
//---------------------------------------------------------------
   
@import "template_variables.less";
@import "bootstrap_variables.less";

// MIXINS import
//---------------------------------------------------------------
  
@import "../../../plugins/system/ef4_jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins
@import "template_mixins.less";

// OFFCANVAS
//---------------------------------------------------------------

html, 
body {
  height: 100%;
} 

//no-scroll class to prevent scrolling
html.no-scroll {
  width: 100%;
  overflow-y: scroll;
  position: fixed;
}

// page wrapper
// --------------------------

//transition to animate off-canvas and page
#jm-allpage {
  .transition(300ms ease all);
}

//right position of off-canvas
.off-canvas-right.off-canvas #jm-allpage {
  margin-left: -@JMoffCanvasWidth;
  margin-right: @JMoffCanvasWidth;
} 

//left position of off-canvas
.off-canvas-left.off-canvas #jm-allpage {
  margin-right: -@JMoffCanvasWidth;
  margin-left: @JMoffCanvasWidth;
} 

// off canvas column
// --------------------------

#jm-offcanvas {
  width: @JMoffCanvasWidth;
  height: 100%;
  position: fixed;
  z-index: 9999;
  background: @JMoffCanvasBackground;
  top: 0;
  .transition(300ms ease all);
}

//right position of off-canvas
.off-canvas-right #jm-offcanvas {
  right: -@JMoffCanvasWidth;
}

.off-canvas-right.off-canvas #jm-offcanvas {
  right: 0;
  overflow-y: auto;
}

//left position of off-canvas
.off-canvas-left #jm-offcanvas {
  left: -@JMoffCanvasWidth;
}

.off-canvas-left.off-canvas #jm-offcanvas {
  left: 0;
  overflow-y: auto;
}

//off-canvas toolbar
#jm-offcanvas-toolbar {
  background: @JMoffCanvasToolbarBackground;
  height: @JMbaseSpaceBig;
  line-height: @JMbaseSpaceBig;
  padding: 0 15px;
}

//off-canvas content
#jm-offcanvas-content {
  padding: 15px;
  color: @JMoffCanvasFontColor;
}

//toggle-nav
.toggle-nav {
  cursor: pointer;
  [class^="icon-"], 
  [class*=" icon-"] {
    font-size: @JMbaseFontSize;
  }
  .fa {
    font-size: round(@JMbaseFontSize*1.15);
  }
}

.toggle-nav.menu {
  display: inline-block;
  color: @JMmenuTopbarFontColor;
  text-align: center;
  vertical-align: top;
	&:hover {
		color: @JMstyle;
	}
}

.toggle-nav.close-menu {
  color: @JMoffCanvasFontColor;
  text-align: left;
}

.off-canvas-left #jm-offcanvas-toolbar {
  text-align: right;
}

html[dir='rtl'] .off-canvas-right #jm-offcanvas-toolbar {
  text-align: left;
}

// toggle-nav in topbar
#jm-top-bar .toggle-nav.menu {
  height: @JMbaseSpace;
  [class^="icon-"], 
  [class*=" icon-"],
  .fa {
    height: @JMbaseSpace;
    line-height: @JMbaseLineHeight;
  }
}

//offcanvas
#jm-offcanvas {
	.jm-module {
		margin: @JMbaseSpace 0 0;
		&:first-child {
			margin: 0;
		}
	}
  .jm-module .jm-title {
    color: @JMoffcanvasModuleTitle;
  }
  .moduletable {
    > h3 {
      color: @JMoffcanvasModuleTitle;
    }
  }
  .category-module {
    .mod-articles-category-title {
      color: @JMoffcanvasModuleTitle;
    }
  }
  .newsflash {
    h1,h2,h3,h4,h5 {
      color: @JMoffcanvasModuleTitle;
      a {
        color: @JMoffcanvasModuleTitle;
      }
    }
  }
  .readmore {
		color: @JMreadmoreOffcanvasFontColor;
    border: 1px solid @JMborderOffcanvas;
    &:hover {
      border: 1px solid transparent;
      background: @JMstyleReadmoreBackground;
    }
  }
  .btn,
  a.button,
  input.button,
  button.button {
		color: @JMbuttonOffcanvasFontColor;
    border: 1px solid @JMborderOffcanvas;
    &:hover {
      border: 1px solid transparent;
    }
  }
  .nav.menu {
    li {
      &:hover > a,
      &.active > a {
        color: @JMstyleMenuFontColorHover;
      }
    }
    > li > a,
    > li > span.separator {
      border-top: 1px solid jmlighten(@JMoffCanvasBackground, 49%);
      color: @JMoffCanvasFontColor;
    }
    > li:first-child {
      > a,
      > span.separator {
        border: none;
      }
    }
    > li.parent.deeper > a,
    > li.parent.deeper > span.separator {
      border-bottom: 1px solid jmlighten(@JMoffCanvasBackground, 49%);
    }
    .nav-child li {
      a, 
      span.separator {
        color: @JMoffCanvasFontColor;
      }
      &:hover > a,
      &.active > a {
        color: @JMstyleMenuFontColorHover;
      }
    }
    &.dropdown-ms {
      li {
        &:hover > a {
          color: @JMoffcanvasModuleTitle;
        }
      }
      > li {
        > a,
        > span.separator {
          color: @JMoffcanvasModuleTitle;
          border: none;
        }
        &.parent.deeper > a,
        &.parent.deeper > span.separator {
          border: none;
        }
      }
      .nav-child li {
        a, 
        span.separator {
          color: @JMoffcanvasModuleTitle;
        }
        &:hover > a,
        &.active > a {
          color: @JMoffcanvasModuleTitle;
        }
      }
    }
  }
}