@use "sass:math";
@use "../../00-base/mixin/core.mixin";

.hoo-persona{
	display: flex;

	height: core.px2rem(56px);

	align-items: center;
	flex: 1;
	// flex: 1 0 auto;

	.hoo-avatar-pres{
		width: 56px;
		height: 56px;
	}

	.hoo-presence{
		top: calc(50% - 1rem);
		left: calc(100% - 1rem);

		width: core.px2rem(20px);
		height: core.px2rem(20px);
	}

	&-data{
		display: flex;
		flex-direction: column;

		min-width: 0;
		margin: 0 1.5rem 0 1rem;
	}

	&-name,
	&-function,
	&-statustext,
	&-available{
		font-size: core.px2rem(14px);
		line-height: core.px2rem(20px);

		overflow: hidden;

		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&-name{
		font-size: core.px2rem(20px);
	}


	&-statustext,
	&-available{
		display: none;
	}
}

.hoo-persona-96{
	$presenceSize: core.px2rem(32px);
	$presonaSize: core.px2rem(96px);

	@extend .hoo-persona;

	height: $presonaSize;
	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}

	.hoo-persona-data{
		margin: 0 1rem 0 1rem;
	}
	.hoo-persona-name{
		font-size: core.px2rem(20px);
		line-height: core.px2rem(28px);
	}
	&-function,
	&-statustext,
	&-available{
		line-height: core.px2rem(20px);
	}
	.hoo-persona-statustext,
	.hoo-persona-available{
		display: block;
	}


	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
}

.hoo-persona-72{
	$presenceSize: 1.5rem;
	$presonaSize: core.px2rem(72px);

	@extend .hoo-persona;

	height: $presonaSize;


	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}

	.hoo-persona-available{
		display: block;
	}

	.hoo-persona-available{
		display: none;
	}

	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
}

.hoo-persona-48{
	$presenceSize: 1rem;
	$presonaSize: core.px2rem(48px);

	@extend .hoo-persona;

	height: $presonaSize;


	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}

	.hoo-persona-available{
		display: none;
	}

	.hoo-persona-data{
		margin: 0 .75rem 0 .75rem;
	}

	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
	.hoo-persona-name{
		font-size: core.px2rem(14px);
	}
	.hoo-persona-function,
	.hoo-persona-statustext,
	.hoo-persona-available{
		font-size: core.px2rem(12px);
	}
}

.hoo-persona-40{
	$presenceSize: 1rem;
	$presonaSize: core.px2rem(40px);

	@extend .hoo-persona-48;

	height: $presonaSize;
	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}


	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
}

.hoo-persona-32{
	$presenceSize: core.px2rem(12px);
	$presonaSize: core.px2rem(32px);

	@extend .hoo-persona-40;

	height: $presonaSize;
	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}
	.hoo-persona-function,
	.hoo-persona-statustext,
	.hoo-persona-available{
		display: none;
	}
	.hoo-persona-data{
		margin: 0 .5rem 0 .5rem;
	}


	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
}

.hoo-persona-24{
	$presenceSize: core.px2rem(12px);
	$presonaSize: core.px2rem(24px);

	@extend .hoo-persona-48;

	height: $presonaSize;
	.hoo-avatar-pres{
		width: $presonaSize;
		height: $presonaSize;
	}
	.hoo-persona-function,
	.hoo-persona-statustext,
	.hoo-persona-available{
		display: none;
	}
	.hoo-persona-data{
		margin: 0 .5rem 0 .5rem;
	}


	.hoo-presence{
		top: calc(50% - #{math.div($presenceSize,2)});
		left: calc(100% - #{math.div($presenceSize,2)});

		width: $presenceSize;
		height: $presenceSize;
	}
}

.hoo-persona-overflow{
	font-size: core.px2rem(14px);

	display: flex;
	justify-content: center;

	width: 32px;
	height: 32px;

	border-radius: 50%;
	background-color: #f3f2f1;

	align-items: center;
	.hoo-persona-data{
		margin: 0;
	}
}