.anime-list-user-avatar
	position absolute
	top calc(content-padding / 2)
	left calc(content-padding / 2)

.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
	horizontal
	text-align right
	justify-content flex-end
	flex-basis 20px
	flex-shrink 1
	margin-left 45px

.anime-list-item-actions
	display none !important

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

		:empty
			display none !important

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

> 700px
	.anime-list-item-airing-date
		display flex !important
		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
		display none !important