const profile-image-size = 280px

.profile-head
	vertical
	align-items center

	position relative
	left calc(content-padding * -1)
	top calc(content-padding-top * -1)
	min-width calc(100% + content-padding * 2)
	padding calc(content-padding * 2)

	color white
	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)

	// default-transition
	// animation appear transition-speed

	overflow hidden

.profile-info
	vertical
	margin-top calc(content-padding * 1.5)

.profile-actions
	horizontal-wrap
	margin-top content-padding

	:empty
		display none

.profile-action
	margin-bottom 0.5rem
	text-shadow none !important

.profile-pro-status
	margin-top calc(typography-margin * 2)

	.icon
		color pro-color
		animation sk-pulse 1.5s infinite linear

.profile-columns
	vertical

.profile-column
	// border 1px solid red
	// height 100px
	padding calc(content-padding / 2)

.profile-column-header
	font-style bold
	margin-bottom 1rem

.profile-section
	margin-bottom 1rem

	.no-data
		text-align left

		&.mounted
			opacity 0.5 !important

.profile-favorite-anime-container
	display grid
	grid-template-columns repeat(auto-fill, anime-image-small-width)
	grid-template-rows repeat(auto-fill, anime-image-small-height)
	grid-gap 0.5rem
	justify-content space-evenly

.profile-friends
	display grid
	grid-template-columns repeat(auto-fill, avatar-size)
	grid-template-rows repeat(auto-fill, avatar-size)
	grid-gap 0.5rem
	margin 0 0.5rem
	justify-content space-evenly

.profile-favorite-anime
	// anime-mini-item

.profile-favorite-anime-image
	anime-mini-item-image

.profile-favorite-characters-container
	display grid
	grid-template-columns repeat(auto-fill, character-image-small-width)
	grid-template-rows repeat(auto-fill, character-image-small-height)
	grid-gap 0.5rem
	justify-content space-evenly

// .profile-favorite-character
// 	margin 0.25rem

// .profile-favorite-character-image

// 	border-radius ui-element-border-radius

> 740px
	.profile-head
		horizontal
		align-items stretch

	.profile-info
		align-items flex-start
		margin-top 0
		padding content-padding
		padding-top 0
		padding-bottom 0
		padding-left calc(content-padding * 2)
		// max-width 1200px

	.profile-actions
		position absolute
		top 0
		right 0
		padding content-padding
		margin-top 0

	.profile-columns
		display grid
		grid-template-columns 27% 46% 27%

	.profile-pro-status
		position absolute
		right 0
		bottom 0
		padding content-padding
		margin-top 0

// const profile-boot-duration = 2s
// animation appear
// 	0%
// 		transform rotateX(90deg)
// 		filter opacity(0) saturate(0) blur(10px)
// 	100%
// 		transform rotateX(0)
// 		filter opacity(1) saturate(1) blur(0)

.profile-cover
	position absolute
	left 0
	top 0
	width 100%
	height 100%
	z-index -1
	object-fit cover
	// background-size cover
	overflow hidden

	// default-transition
	// animation cover-animation profile-boot-duration
	// animation-fill-mode forwards
	filter brightness(30%) blur(0)

// animation cover-animation
// 	0%
// 		filter brightness(500%) blur(5px)
// 	100%
// 		filter brightness(35%) blur(0)

.profile-image
	object-fit cover
	width 100%
	height 100%

.profile-image-container
	flex-basis profile-image-size
	flex-shrink 0
	width profile-image-size
	height profile-image-size
	max-width profile-image-size
	max-height profile-image-size
	border-radius ui-element-border-radius
	overflow hidden

#nick
	margin-bottom 1rem

.no-data
	width 100%
	text-align center