@use "../mixins" as *;

.person-picture {
	@include flex($justify: center, $align: center);
	user-select: none;
	text-align: center;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
	flex: 0 0 auto;
	background-color: var(--control-alt-fill-quarternary);
	border: 1px solid var(--card-stroke-default);
	background-clip: padding-box;
	box-sizing: border-box;
	border-radius: 50%;
	font: {
		family: var(--font-family-display);
		weight: 600;
		size: calc(var(--person-picture-size) * (5 / 12));
	}
	&-container {
		display: flex;
		position: relative;
		inline-size: var(--person-picture-size);
		block-size: var(--person-picture-size);
	}
	&-badge {
		@include flex($direction: column, $align: end);
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;
		inline-size: 100%;
		block-size: 100%;
	}
}