@import 'constants';

#WRAPPER > div.menu{

	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: $menu-width;
		height: 100%;

	background-color: $menu-bg;

	flex-direction:  column;
	justify-content: flex-start;
	align-items:     center;
	flex-wrap: nowrap;

	overflow: hidden;

	/* (1) Menu Item */
	& > span.channel{

		display: block;
		position: relative;
			width: $menu-item-size;
			height: $menu-item-size;

		margin: #{$menu-item-space} 0;

		border-radius: 50% / 50%;

		background: $menu-item-bg center center no-repeat;
		background-size: auto 55%;

		overflow: visible;

		cursor: pointer;

		transition: border-radius    .4s cubic-bezier(.49, .4, .26, 1.93),
					background-color .4s ease-in-out,
					border-color     .2s ease-in-out;

		// {1} First item have margin-top //
		&:first-child{
			margin-top: #{$menu-item-space * 1.8};
		}

		// {2} [data-add] have no background color //
		&[data-add]{
			background-color: #1e2124;
			border: 1px dashed #535552;

			&:hover{ border-color: #ddd; }
		}


		// {3} Hover + current channel (except [data-add])//
		&:not([data-add='1']):hover,
		&:not([data-add='1']).active{
			border-radius: 30% / 30%;

			// if [data-special=1] -> colorize
			&[data-special='1']{ background-color: #7289da; }

		}

		// {4} active channel : left border //
		&:not([data-add='1']):not([data-sub]):after{
			content: '';

			display: block;
			position: absolute;
				top: 10%;
				left: calc( #{$menu-item-size/2} - #{$menu-width/2} - 10px );
				width: 10px;
				height: 80%;

			border-radius: 3px;

			background-color: #aaa;

			transition: left .2s ease-in-out;
		}
		&:not([data-add='1']):not([data-sub]).active:after{
			left: calc( #{$menu-item-size/2} - #{$menu-width/2} - 5px );
		}

		// {4} sub label //
		&[data-sub]:not([data-sub='']){

			display: inline-block;
			position: relative;

			margin-bottom: #{$menu-item-space + 2em};

			// show sub-text
			&:before{
				content: attr(data-sub);

				display: inline-block;
				position: absolute;
					top:    calc( 100% + 1em );
					left:   1em;
					width:  calc( 100% - 2em );
					height: calc( 2em + #{$menu-item-space} );

				font-size:   .6em;
				color:       #777;
				text-indent: -.7em;
				text-align:  center;
				white-space: nowrap;
				text-transform: uppercase;

				border-bottom: 2px solid #{$menu-item-bg};

				overflow: visible;

			}

		}

		// {5} Specific icons //
		&[data-icon='group']{
			background-image: url('../asset/svg/menu.group.svg');
		}

		&[data-icon='add']{
			background-image: url('../asset/svg/menu.add.svg');
			&:hover{ background-image: url('../asset/svg/menu.add@hover.svg'); }
		}



	}


}