.anime-list-user-avatar
	position absolute
	top content-padding-half
	left content-padding-half

.anime-list-container
	width 100%
	max-width 800px
	margin 0 auto
	margin-bottom 1rem

.anime-list
	display grid
	grid-template-rows 40px
	grid-template-columns 100%

.anime-list-item
	table-row
	horizontal
	align-items center
	padding-right 1rem
	width 100%
	height 40px

.anime-list-item-image-container
	padding 0
	width anime-image-tiny-width

.anime-list-item-image-link
	display flex

.anime-list-item-image
	anime-list-item-image

.anime-list-item-name
	flex 1
	margin 0.5rem 1rem
	padding 0
	clip-long-text

	a
		color anime-list-item-name-color
		:hover
			color link-hover-color

.anime-list-item-episodes
	horizontal
	justify-content flex-end
	text-align right
	white-space nowrap
	flex-basis 80px
	flex-shrink 1

	:hover
		.plus-episode
			opacity 1
			pointer-events auto

.anime-list-item-episodes-watched
	flex 0.45
	horizontal
	justify-content flex-end

.plus-episode
	display inline-block
	cursor pointer
	opacity 0
	pointer-events none
	margin-left 1px
	transition opacity transition-speed ease

.plus-episode-dummy
	display inline-block
	opacity 0

.anime-list-item-episodes-separator
	flex 0.1
	opacity 0.5

.anime-list-item-episodes-max
	flex 0.3
	opacity 0.5

.anime-list-item-rating-container
	horizontal
	justify-content flex-end
	flex-basis 65px
	flex-shrink 1

.anime-list-item-rating
	default-transition

	:hover,
	:focus
		transform scale(1.5)

// .anime-list-item-actions
// 	display none

// > 740px
// 	.anime-list-item-actions
// 		display flex
// 		flex-basis 30px
// 		flex-shrink 1

// 		:empty
// 			display none

.anime-list-item-airing-date
	display none

> 700px
	.anime-list-item-airing-date
		display flex
		text-align right
		flex-basis 150px
		flex-shrink 1
		color hsla(text-color-h, text-color-s, text-color-l, 0.8)
		justify-content flex-end

	.anime-list-item-episodes
		flex-basis 130px

< 1100px
	.anime-list-item-rating-container
		display none