@import 'constants';

#WRAPPER > div.side-menu{

	display: flex;
	position: absolute;
		top: $header-height;
		left: calc( 100% - #{$side-menu-width} );
		width: $side-menu-width;
		height: calc( 100% - #{$header-height} );

	background-color: $side-menu-bg;

	flex-flow: row wrap;
	justify-content: flex-start;
	align-items:     center;
	align-content:   flex-start;

	& > div.user{

		flex: 80%;

		display: flex;
		position: relative;

		margin: .2em 1em;
		padding: .5em 1em;

		border-radius: 5px;

		background-color: transparent;

		flex-flow:       row nowrap;
		justify-content: flex-start;
		align-items:     center;

		transition: background-color .1s ease-in-out;

		overflow: hidden;

		cursor: pointer;

		&:hover{ background-color: #36393f; }

		& > div.icon{

			display: block;
			position: relative;
				width: 2em;
				height: 2em;

			margin-right: .5em;

			border-radius: 50% / 50%;

			background-color: #fff;

			cursor: pointer;

			transition: opacity .2s ease-in-out;
			background: url() center center no-repeat;
			background-size: cover;


			// icon "pastille"
			&:after{
				content: '';

				display: block;
				position: absolute;
					top: calc( 100% - .9em + .1em );
					left: calc( 100% - .9em + .1em );
					width: .7em;
					height: .7em;

				border-radius: 50% / 50%;
				border: .2em solid #{$side-menu-bg};

				background-color: #eb7719;

				transition: background-color .1s ease-in-out;
			}

		}
		// icon border invisible even on hover
		&:hover > div.icon:after{
			border-color: #36393f;
		}

		&[data-online='1'] > div.icon:after{
			background-color: #19eb69;
		}
	}

}