@use '../../base/functions' as *;

.avatar {
	display: inline-block;
	height: 2rem;
	position: relative;
	width: 2rem;
	overflow: hidden;

	&::before {
		inset: 0;
		text-align: center;
		color: var(--ui-text);
		text-transform: uppercase;
		content: attr(data-name);
		display: block;
		height: 1.25rem;
		margin: auto;
		overflow: hidden;
		position: absolute;
		z-index: 1;
	}

	&.no-image {
		&::after {
			background: var(--color-dark-purple);
			inset: 0;
			content: '';
			height: 100%;
			margin: 0;
			position: absolute;
			width: 100%;
			z-index: 0;
		}
	}

	img {
		box-sizing: border-box;
		display: block;
		height: 100%;
		object-fit: cover;
		position: relative;
		width: 100%;
		z-index: 2;
	}

	&-extra-small {
		height: 1.125rem;
		width: 1.125rem;

		&::before {
			transform: scale(0.6);
		}
	}

	&-small {
		height: 1.5rem;
		width: 1.5rem;

		&::before {
			transform: scale(0.8);
		}
	}

	&-medium {
		height: 4rem;
		width: 4rem;

		&::before {
			transform: scale(1);
		}
	}

	&-large {
		height: 5.25rem;
		width: 5.25rem;

		&::before {
			transform: scale(2.6);
		}
	}

	&-huge {
		height: 8.75rem;
		width: 8.75rem;

		&::before {
			transform: scale(2.6);
		}
	}
}