notify.moe/pages/anime/anime.scarlet

.anime-header
	horizontal

< 800px
	.anime-header
		vertical

.anime-section-name
	font-weight bold

.anime-image-container
	horizontal
	justify-content center
	align-items flex-start

.anime-cover-image
	width 230px
	height auto
	border-radius 3px
	
	default-transition
	object-fit cover

	saturate-up
	shadow-up
	
.anime-info
	vertical
	flex 1

.space
	width content-padding
	height content-padding

.anime-title
	text-align left
	margin-bottom 0.5rem

.anime-alternative-title
	font-size 0.9em
	margin-bottom 0.5rem
	a
		color rgba(60, 60, 60, 0.5) !important

.anime-actions
	horizontal
	justify-content center

	// Action button margin
	margin calc(content-padding - 0.5rem) -0.5rem

	// Setting z-index requires setting a background as well
	z-index 10
	background-color bg-color

> 900px
	.anime-actions
		position absolute
		top 0
		right content-padding

.anime-rating-categories
	horizontal
	width 100%

.anime-rating-category
	ui-element
	flex 1
	text-align center
	margin 0.5rem

.anime-rating-category-name
	font-size 1.3rem
	margin-top 0.5rem

.anime-rating
	margin 0.5rem
	letter-spacing 3px
	font-size 1.3rem
	color link-color

.anime-widget
	margin-top 0.6rem
	margin-bottom 0.4rem

< 800px
	.anime-rating-categories
		vertical

.sources
	font-size 0.8rem
	opacity 0.5
	margin-top 0.5rem

.relations
	horizontal-wrap

.relation
	vertical
	align-items center
	padding 0.5rem

.relation-type
	font-size 0.7rem
	margin-top 0.1rem

.relation-image
	width 100px
	height 141px
	border-radius 3px
	object-fit cover
	default-transition
	shadow-up