////
/// @group layout/user
////

/// User element at the top left of the page; inside header area.
/// Makes use of @see $os-theme-desig.
/// @param {integer} $rows [2] - Can have two rows (user/position), or three rows (user/position/mail).
/// @todo Rework "3 rows" variant.
@mixin os-user($rows: 2) {
	.v-horizontallayout-UserHandler {
		margin-right: $v-unit-size;
		//border: $v-border;
		margin-left: $v-unit-size;
		}

	.v-slot-os-userportrait {
		width: auto;
		height: auto;
		}
	.os-userportrait {
		img {
			border-radius: 50%;
			width: $rows * $v-unit-size;
		    height: $rows * $v-unit-size;
			border: 0px solid grey;
			padding-right: floor(($rows * $v-unit-size) / 10);
			}
        }

	.v-slot-os-username, .v-slot-os-userposition, .v-slot-os-useremail {
		.os-username {
			//padding-top: 3px;
			color: valo-font-color($os-main-header-bg);
	 		font-weight: bold;
/* 			font-size: $v-font-size * $v-scaling-factor--large; */
/* 			padding-left: $v-font-size * $rows;  */
			padding-left: $v-font-size;
			line-height: $v-unit-size;
			@if $rows == 2 or $rows == 3 {
/* 				font-size: $v-font-size; */
	 			}
			}
		.os-userposition {
			color: valo-font-color($os-main-header-bg);
/* 			font-size: $v-font-size  * $v-scaling-factor--large; */
/* 			padding-left: $v-font-size * $rows;  */
			padding-left: $v-font-size;
			line-height: $v-unit-size;
			@if $rows == 2 or $rows == 3 {
/* 				font-size: $v-font-size; */
	 			}
			}
		.os-useremail {
		 	font-size: $v-font-size; //(8px?)
		 	color: valo-font-color($os-main-header-bg);
			}
/* 		font-size: $v-font-size;	 */
		}

	@if $rows==2 {
		.v-slot-os-useremail {
			display: none;
			}
		}

	@if $os-theme-desig == "cxo" {
		.os-userlogoutbutton, .os-usermenubutton {
	/* 		content: '&nbsp;'; */
			.v-icon {
				display: none;
				}
			}

		.os-userlogoutbutton {
			@include os-button-usermenu;
			background: $os-mid-contrast;
	/* 		@if $rows == 2 or $rows == 3 { */
			&.v-button {
				@include box-shadow(2px 1px 7px rgba(0,0,0,0.35));
				@include os-icon-font (	$float: right,
										$content: '\f2f5',
										$size: $v-font-size,
										$placement: after,
										$line-height: $v-unit-size,  /* is button size */
										$background: "nochange");
/* 				&:after {top: $v-unit-size/2 - get_crisp_size($initial-font-size: $v-font-size)/2;} */
				}
	/* 			}	 */
	/* 		@else { */
	/* 			@include os-icon-font (	$float: right, */
	/* 									$content: '\f2f5', */
	/* 									$size: $v-font-size * $v-scaling-factor--large, */
	/* 									$placement: after); */
	/* 			} */

/* 			color: valo-font-color($os-mid-contrast); */
	/* 		&:after { */
	/* 			line-height: $v-unit-size; */
	/* 			}								 */

			.v-icon {
				display: none;
				}
			}

		.os-usermenubutton {
			@include os-button-usermenu;

	/* 		@if $rows == 2 or $rows == 3 { */
			&.v-button {
				@include box-shadow(2px 1px 7px rgba(0,0,0,0.35));
				@include os-icon-font (	$float: right,
										$content: '\f0c9',
										$size: $v-font-size,
										$line-height: $v-unit-size,  /* is button size */
										$placement: after,
										$background: "nochange");
				}
/* 				&:after {top: $v-unit-size/2 - get_crisp_size($initial-font-size: $v-font-size)/2;} */

	/* 		}		 */
	/* 		@else {									 */
	/* 			@include os-icon-font (	$float: right, */
	/* 									$content: '\f0c9', */
	/* 									$size: $v-font-size * $v-scaling-factor--large, */
	/* 									$placement: after); */
	/* 			} */

/* 			color: valo-font-color($os-button-color); */
	/* 		&:after { */
	/* 			line-height: $v-unit-size;			 */
	/* 			}								 */

	/* 		.v-popup-indicator { */
	/* 			display: none; */
	/* 			 } */
			}
		}
	@else {
		.os-userlogoutbutton, .os-usermenubutton {
			content: '&nbsp;';
			@include box-shadow(none);
			}

		.os-userlogoutbutton {
			@include os-button-usermenu;

			@if $rows == 2 or $rows == 3 {
				@include os-icon-font (	$float: right,
										$content: '\f2f5',
										$size: $v-font-size,
										$placement: after);
				}
			@else {
				@include os-icon-font (	$float: right,
										$content: '\f2f5',
										$size: $v-font-size * $v-scaling-factor--large,
										$placement: after);
				}

			color: valo-font-color($os-main-header-bg);
			&:after {
				line-height: $v-unit-size;
				}

			.v-icon {
				display: none;
				}
			}

		.os-usermenubutton {
			@include os-button-usermenu;

			@if $rows == 2 or $rows == 3 {
				@include os-icon-font (	$float: right,
										$content: '\f0c9',
										$size: $v-font-size,
										$placement: after);
			}
			@else {
				@include os-icon-font (	$float: right,
										$content: '\f0c9',
										$size: $v-font-size * $v-scaling-factor--large,
										$placement: after);
				}

			color: valo-font-color($os-main-header-bg);
			&:after {
				line-height: $v-unit-size;
				}

			.v-popup-indicator {
				display: none;
				 }
			}
		}
	}

/// Accordion that opens when clicking the according user-menu button.
@mixin os-user-accordion {
    ///@todo find out what this is used for.
	$iconfont:true;

	.v-accordion {
		border: 0px;
		}
	.v-tree {
		padding-top: floor($v-unit-size/5);
		padding-bottom: floor($v-unit-size/5);
		}
	.v-accordion-item {
		border-top-width: 0px !important;
		background: $os-light-contrast;
		}

    /// Makes accordion container expand with content.
    .v-accordion-item-content {
         .v-gridlayout-slot {
			position: relative;
			}
	     .v-formlayout-contentcell .v-gridlayout .v-gridlayout-slot {
	       position: absolute;
	       }
         .v-table-body-wrapper {
           min-width: $v-unit-size * 8;
           min-height: $v-unit-size * 3;
           width: auto !important;
           height: auto !important;
           }
        }

	.v-popupbutton-popup-os-usermenubutton.v-popupview-popup {
		padding: 0px;

		.v-accordion {
		    width: auto !Important;
/* 		    min-width: 500px; */
		    
			[class*='os-menutree-'] {
				> .v-tree {
					width: 100% !important;
					}
				.v-tree-node-caption:hover {
					color: $v-focus-color;
					}
				.v-tree-node-selected {
					color: $v-focus-color;
					font-weight: bold;
					&::after {
						background: transparent;
						}
					}
				}
			}

		.v-accordion-item-caption {
			> .v-caption {
				border-top: $v-border;
				border-bottom-width: 0px;
				background-image: none;
				//background-color: $os-mid-contrast;
				> .v-captiontext {
					@include os-icon-font($content: '\f138');
					&::before {
						padding-right: ceil($v-unit-size/3);
						}
					}
				> img.v-icon {
					@if $iconfont==true {
						display: none;
						}
					}
				}
			}
		.v-accordion-item-open {
			//background-color: get_contrast($os-fn-medium, $os-main-header-bg, $os-fn-desaturate);
			.v-accordion-item-caption {
				> .v-caption {
					background-color: $v-focus-color;
					border-top: $v-border;
					border-top-color: $v-focus-color;
					color: valo-font-color($v-focus-color);
					> .v-captiontext  {
						@include os-icon-font($content: '\f13a');
						&::before {
							padding-right: 10px;
							}
						color: $v-focus-color;
						color: valo-font-color($v-focus-color);
						font-weight: bold;
						}
					}
				}
			}
		.v-captiontext, [class*='-caption'] {
			//font-size: $v-font-size;
			}
		}
	}