@import '../../../styles/_partials/index'

.Avatar
	position: relative

	.Avatar_Initials
		display: flex
		align-items: center
		justify-content: center
		width: 100%
		height: 100%
		text-align: center
		color: $white
		font-size: 16px
		font-weight: 700
		text-transform: uppercase

		&.Avatar_Initials__BackgroundBlue
			background-color: $blue

		&.Avatar_Initials__BackgroundGreen
			background-color: $green

		&.Avatar_Initials__BackgroundYellow
			background-color: $yellow

		&.Avatar_Initials__BackgroundOrange
			background-color: $orange

		&.Avatar_Initials__BackgroundRed
			background-color: $red

		&.Avatar_Initials__BackgroundPink
			background-color: $pink

		&.Avatar_Initials__BackgroundPurple
			background-color: $purple

	.Avatar_Image
		&.Avatar_Image__PositionAbsolute
			position: absolute
			left: 0
			top: 0

		&.Avatar_Image__Hidden
			opacity: 0