/*
	@doc
	<name>border</name>
	<desc>Adds a border to the specified side(s). (all if none specified)</desc>
	<example>
		.myClass{
			@include border(#888, bottom, 2px, solid);
		}
	</example>
	<output>
		.myClass{
			border-bottom: #888 2px solid;
		}
	</output>
*/
/*
	@doc
	<name>box-shadow</name>
	<desc>Adds a box-shadow to the element (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include box-shadow(8px 8px 5px #777 false);
		}
	</example>
	<output>
		.myClass{
			-webkit-box-shadow: 8px 8px 4px #777;
			-moz-box-shadow: 8px 8px 4px #777;
			box-shadow: 8px 8px 4px #777;
		}
	</output>
*/
/*
	@doc
	<name>button-3D</name>
	<desc>Adds a cubic/3D effect to the element. Mostly for buttons, but could be used in other ways!</desc>
	<example>
		.myClass{
			@include button3D();
		}
	</example>
	<output>
		.myClass{

		}
	</output>
*/
/*
	@doc
	<name>filter</name>
	<desc>Adds a CSS filter (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include(grayscale, 100%);
		}
	</example>
	<output>
		.myClass{
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: grayscale(100%);
		}
	</output>
*/
/*
	@doc
	<name>sprite</name>
	<desc>Styles a sprite..</desc>
	<example>
		.myButton{
			@include sprite(50px, 24px, 24px);
		}
	</example>
	<output>
		.myButton{
			background: url('../img/icons1.png') 0 50px no-repeat;
			height: 24px;
			width: 24px;
			display: inline-block;
		}
	</output>
*/
/*
	@doc
	<name>clearfix</name>
	<desc>Simple clearfix.</desc>
	<example>@include clearfix();</example>
	<output>
		.clearfix{
			content:"";
			display:table;
			clear:both;
		}
	</output>
*/
/*
	@doc
	<name>background-rollover</name>
	<desc>Changes the background if rolled over or hovered</desc>
	<example>
		#myDiv{
			@include background(example, rl, center top no-repeat gif);
		}
	</example>
	<output>
		#mySection{
			background: url(img/example-up.gif) center top no-repeat;
			&:hover {
				background: url(img/example-rl.gif) center top no-repeat;
			}
		}
	</output>
*/
/*
	@doc
	<name>background-slideEffect</name>
	<desc>Adds a slide effect to the background.</desc>
	<example>
		#myDiv{
			@include backgroundSlideEffect(example, 100px, .2s, #000);
		}
	</example>
	<output>
		#myDiv{
			position: relative;
			line-height: $distance;
			span{
				display: inline-block;
				position: relative;
				overflow: hidden;
				@include hideText;
				&:before, &:after{
					color: $color;
					position: absolute;
					top: 0;
					left:0;
					content: attr(data-content);
					@include background($image);
					@include transition(top, $speed);
				}
				&:after{
					top: $distance;
				}
			}
			&:hover{
				span{
					&:before{
						top: $distance * -1;
					}
					&:after{
						top: 0px;
					}
				}
			}
		}
	</output>
*/
/*
	@doc
	<name>display-show</name>
	<desc>Changes the display to show an element.</desc>
	<example>@include show(block);</example>
	<output>
		#myDiv{
			display:block;
		}
	</output>
*/
/*
	@doc
	<name>display-hide</name>
	<desc>Changes the display to hide an element.</desc>
	<example>@include hide()</example>
	<output>
		.myClass{
			display:none;
		}
	</output>
*/
/*
	@doc
	<name>noOverflow</name>
	<desc>Hides the overflow</desc>
	<example>@include noOverflow();</example>
	<output>
		#wrapper{
			overflow: hidden;
		}
	</output>
*/
/*
	@doc
	<name>z-index</name>
	<desc>Receives a section & optionnal additional value to set its index.</desc>
	<example>@include z-index(overall,55);</example>
	<output>
		.myTopElement{
			z-index:1155;
		}
	</output>
*/
/*
	@doc
	<name>stickyFooter</name>
	<desc>Makes the footer sticky.</desc>
	<example>@include stickyFooter(250px, 0px);</example>
	<output>{ ... };</output>
*/
/*
	@doc
	<name>contained-in mixins</name>
	<desc>Contained mixins</desc>
	<example>@include contained-in($selector);</example>
	<example>@include contained-in('.no-js');</example>
	<example>@include contained-in('#id', '.no-js', 'body');</example>
	<output>
		.no-js .class{
			@content;
		}
	</output>
*/
/*	@doc
	<name>prefixer</name>
	<desc>Adds browsers' different prefixes when needed. (doc. http://bourbon.io/docs/#prefixer)</desc>
	<example>@include prefixer(transform, rotate(5deg));</example>
	<output>
		.myElement{
			-webkit-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-ms-transform: rotate(5deg);
			--transform: rotate(5deg);
			transform: rotate(5deg);
		}
	</output>
*/
.sidebar-nav .menu {
  margin: 0 -0.125em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.sidebar-nav .menu-item {
  margin: 0;
  padding: 0 0.125em 0.25em;
  flex: 0 1 auto;
}
.sidebar-nav .menu-item:before {
  content: none;
}
.sidebar-nav .menu-link {
  background-color: #ededed;
  color: inherit;
  display: block;
  padding: 0.75em 1.25em;
  transition: color ease-in-out 125ms, background-color ease-in-out 125ms;
  width: 100%;
  height: 100%;
}
.sidebar-nav .menu-link.is-active, .sidebar-nav .menu-link.active, .sidebar-nav .menu-link:hover {
  text-decoration: none;
  background-color: #272727;
  color: #ffffff;
}
.sidebar-nav .level-0 .menu-item.menu-item--expanded > a, .sidebar-nav .level-0 .menu-item.menu-item--collapsed > a {
  position: relative;
  padding-right: 48px;
}
.sidebar-nav .level-0 .menu-item.menu-item--expanded > a:after, .sidebar-nav .level-0 .menu-item.menu-item--collapsed > a:after {
  content: "";
  display: block;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  height: 22px;
  width: 22px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translate(0, -50%);
}
.sidebar-nav .level-0 .menu-item.menu-item--expanded > a:after {
  background-image: url("../../images/icons/chevron-small-bottom-dark.svg");
}
.sidebar-nav .level-0 .menu-item.menu-item--expanded > a.is-active:after, .sidebar-nav .level-0 .menu-item.menu-item--expanded > a:hover:after {
  background-image: url("../../images/icons/chevron-small-bottom.svg");
}
.sidebar-nav .level-0 .menu-item.menu-item--collapsed > a:after {
  background-image: url("../../images/icons/chevron-small-right-dark.svg");
}
.sidebar-nav .level-0 .menu-item.menu-item--collapsed > a.is-active:after, .sidebar-nav .level-0 .menu-item.menu-item--collapsed > a:hover:after {
  background-image: url("../../images/icons/chevron-small-right.svg");
}
.sidebar-nav .level-1 {
  margin-top: 5px;
}
.sidebar-nav .level-1 .menu-item {
  padding-left: 15px;
}
.sidebar-nav .level-1 .menu-item a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  padding-left: 15px;
}
.sidebar-nav .level-1 .menu-item + .menu-item {
  padding-top: 5px;
}

@media (min-width: 480px) {
  .sidebar-nav .menu {
    flex-direction: row;
  }
  .sidebar-nav .menu-item {
    width: 50%;
  }
}
@media (min-width: 720px) {
  .sidebar-nav .menu {
    flex-direction: column;
    margin: 0;
  }
  .sidebar-nav .menu-item {
    padding: 0;
    width: 100%;
  }
  .sidebar-nav .menu-item + .menu-item {
    padding-top: 0.5em;
  }
  .sidebar-nav .menu-link {
    padding: 1em 1.5em;
  }
}
@media (min-width: 980px) {
  .sidebar-nav .menu-link {
    font-size: 1.125em;
  }
}