
$main-section-padding: 32px 48px 32px 36px
$main-section-padding-mobile: 32px 28px 28px 28px

$section-title-margin: 20px
$sub-sections-between-margin: 28px
$sub-section-title-margin: 8px

.main-section-wrapper
	padding: $main-section-padding
	background-color: $color-bright
	overflow: auto

	& input, & select
		width: 100%

// for search result etc
.entity-list

	& &__title
		// font-size: large
		margin-bottom: $section-title-margin

	& &__entities

	& &__entity
		display: flex
		margin-bottom: 36px
		&::after
			@include clear

	& &__entity-img
		// float: left
		object-fit: contain
		// height: 150px
		$width: 130px
		min-width: $width
		max-width: $width
		
	& &__entity-text
		margin-left: 20px
		overflow: hidden
		width: 100%
    	// float: left
		& .tag-collection
			margin-left: -3px

	& &__entity-link
		font-size: 1.2em
	
	& &__entity-title
		display: block

	& &__entity-category
		color: $color-tertiary
		margin-left: 5px
		position: relative;
		top: -1px;		

	& &__entity-info
		max-width: 73%
		white-space: nowrap
		overflow: hidden
		display: inline-block
		text-overflow: ellipsis
		position: relative
		top: 0.52em
		&--full-length
			// display: block
			max-width: 100%
			// margin-bottom: 12px

	& &__entity-brief
		margin-top: 8px
		display: -webkit-box
		-webkit-box-orient: vertical
		-webkit-line-clamp: 4
		overflow: hidden
		margin-bottom: 0

	$rating-info-gap-width: 5px
	& &__rating
		display: inline-block
		margin: 0

	& &__rating--empty
		// width: $empty-rating-width
		margin-right: $rating-info-gap-width

	& &__rating-score
		margin-right: $rating-info-gap-width
		position: relative
		top: 1px

	& &__rating-star
		display: inline
		position: relative
		top: 0.3em
		left: -0.3em

// detail page
.entity-detail

	& &__img
		height: 210px
		float: left
		object-fit: contain
		max-width: 150px
		object-position: top
	
	& &__img-origin
		cursor: zoom-in

	& &__info
		float: left
		margin-left: 20px
		overflow: hidden
		text-overflow: ellipsis
		width: 70%

	& &__title
		font-weight: bold

	& &__title--secondary
		color: $color-tertiary
		
	& &__fields
		display: inline-block
		vertical-align: top
		width: 46%
		margin-left: 2%
		// margin-bottom: 5px
		& div, & span
			margin: 1px 0
		& + .tag-collection
			margin-top: 5px
			margin-left: 6px

	& &__rating
		position: relative
		top: -5px

	& &__rating-star
		position: relative
		left: -4px
		top: 3px

	& &__rating-score
		font-weight: bold

	&::after
		@include clear

$mark-review-padding: 3px 0
$mark-review-padding-wider: 6px 0

// includes title and description of an entity
// sub section
.entity-desc
	margin-bottom: $sub-sections-between-margin
	& &__title
		display: inline-block
		margin-bottom: $sub-section-title-margin
	& &__content
		overflow: hidden
		&--folded
			max-height: 202px

	& &__unfold-button
		display: flex
		color: $color-primary
		background-color: transparent
		justify-content: center
		text-align: center
		&--hidden
			display: none

	& &__empty

// includes marks of an entity
// sub section
.entity-marks
	margin-bottom: $sub-sections-between-margin
	& &__title
		margin-bottom: $sub-section-title-margin
		display: inline-block
		& > a
			margin-right: 5px
		&--stand-alone
			margin-bottom: $section-title-margin

	& &__more-link
		margin-left: 5px
	& &__mark-list
	
	& &__mark
		margin: 0
		padding: $mark-review-padding
		border-bottom: 1px dashed $color-quinary
		&:last-child
			border: none
		&--wider
			padding: $mark-review-padding-wider

	& &__mark-content
		margin-bottom: 0

	& &__mark-time
		color: $color-light
		margin-left: 2px

	& &__owner-link

	& &__rating-star
		position: relative
		top: 4px

	& &__empty

// includes reviews of an entity
// sub section	
.entity-reviews
	// when used alone
	&:first-child
		margin-bottom: $sub-sections-between-margin
	& &__title
		display: inline-block
		margin-bottom: $sub-section-title-margin
		& > a
			margin-right: 5px
		&--stand-alone
			margin-bottom: $section-title-margin		
	& &__more-link
		margin-left: 5px
	& &__review-list

	& &__review
		margin: 0
		padding: $mark-review-padding
		border-bottom: 1px dashed $color-quinary
		&:last-child
			border: none
		&--wider
			padding: $mark-review-padding-wider			

	& &__review-time
		color: $color-light
		margin-left: 2px
	& &__review-title

	& &__owner-link

	& &__empty		

.dividing-line
	height: 0
	width: 100%
	margin: 40px 0 24px 0
	border-top: solid 1px $color-light
	&.dividing-line--dashed
		margin: 0
		margin-top: 10px
		margin-bottom: 2px
		border-top: 1px dashed $color-quinary;

// on home page
.entity-sort
	position: relative
	margin-bottom: 30px
	& &__label
		font-size: large
		display: inline-block
		margin-bottom: $section-title-margin

	& &__more-link
		margin-left: 8px

	& &__count
		// font-size: large
		// letter-spacing: -1px
		color: $color-tertiary
		&::before
			content: '('
		&::after
			content: ')'

	& &__entity-list
		display: flex
		justify-content: flex-start
		// padding-left: 24px
		flex-wrap: wrap

	& &__entity
		padding: 0 10px
		flex-basis: 20%
		text-align: center
		display: inline-block
		color: $color-secondary
		&:hover
			color: $color-primary
		& > a
			color: inherit

	& &__entity-img
		height: 110px

	& &__entity-name
		text-overflow: ellipsis
		overflow: hidden
		display: -webkit-box
		-webkit-box-orient: vertical
		-webkit-line-clamp: 2

	& &__empty
	
	// for drag and sort purpose
	&--placeholder
		border: dashed $color-tertiary 4px
	&--hover
		padding: 10px
		border: dashed $color-primary 2px !important
		border-radius: 3px
	&--sortable
		padding: 10px
		margin: 10px 0
		border: dashed $color-tertiary 2px
		cursor: all-scroll
	&--hidden
		opacity: 0.4


.entity-sort-control
	display: flex
	justify-content: flex-end

	&__button
		margin-top: 5px
		margin-left: 12px
		padding: 0 2px
		cursor: pointer
		color: $color-tertiary
		&:hover
			color: $color-primary
			& > .icon-save svg, & > .icon-edit svg
				fill: $color-primary

		&--float-right
			position: absolute
			top: 4px
			right: 10px

	&__text


// follower/following list page
.related-user-list
	& &__title
		margin-bottom: $section-title-margin

	& &__user
		display: flex
		justify-content: flex-start
		margin-bottom: 20px

	& &__user-info
		margin-left: 15px
		overflow: auto

	& &__user-name
	
	& &__user-bio

	& &__user-avatar
		max-height: 72px
		min-width: 72px

// review detail page
.review-head
	& &__title
		display: inline-block
		font-weight: bold

	& &__body
		margin-bottom: 10px
		&::after
			@include clear
	
	& &__info
		float: left

	& &__owner-link
		color: $color-light
		&:hover
			color: $color-primary

	& &__time
		color: $color-light

	& &__rating-star
		position: relative
		top: 3px
		left: -1px
	
	& &__actions
		float: right

	& &__action-link
		&:not(:first-child)
			margin-left: 5px

// tag list
.tag-collection
	margin-left: -9px
	& &__tag
		position: relative;
		display: block;
		float: left;
		color: white;
		background: $color-light;
		padding: 5px;
		// margin: 4px;
		border-radius: .3rem;
		line-height: 1.2em;
		font-size: 80%
		margin: 3px
		& a
			color: white
			&:hover
				color: $color-primary


.track-carousel
	position: relative
	margin-top: 5px
	// padding: 0

	&__content
		overflow: auto
		scroll-behavior: smooth
		scrollbar-width: none
		display: flex
		margin: auto
		box-sizing: border-box
		padding-bottom: 10px
		&::-webkit-scrollbar
			// horizontal scrollbar width
			height: 3px
			// vertical scrollbar width
			width: 1px
			background-color: $color-quinary
		&::-webkit-scrollbar-thumb
			background-color: $color-tertiary


	&__track
		text-align: center
		overflow: hidden
		text-overflow: ellipsis
		min-width: 18%
		max-width: 18%
		margin-right: 2.5%
		& img
			object-fit: contain
	&__track-title
		// word-break: keep-all
		// overflow-wrap: anywhere
		white-space: nowrap

	&__button
		display: flex
		justify-content: center
		align-content: center
		background: white
		border: none
		padding: 8px
		border-radius: 50%
		outline: 0
		cursor: pointer
		position: absolute
		top: 50%
		&--prev
			left: 0
			transform: translate(50%, -50%)
		&--next
			right: 0
			transform: translate(-50%, -50%)


// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
	.entity-list
		& &__entity
			flex-direction: column
			margin-bottom: 30px
		& &__entity-text
			margin-left: 0
		& &__entity-img-wrapper
			margin-bottom: 8px
		& &__entity-info
			max-width: unset
		& &__rating--empty + &__entity-info
			max-width: 70%
		& &__entity-brief
			-webkit-line-clamp: 5

	.entity-detail
		flex-direction: column
		& &__title
			margin-bottom: 5px
		& &__info
			margin-left: 0
			float: none
			display: flex
			flex-direction: column
			width: 100%
		& &__img
			margin-bottom: 24px
			float: none
			height: unset
			max-width: 170px;
		& &__fields
			width: unset
			margin-left: unset
			& + .tag-collection
				margin-left: -3px

	.entity-marks
		& &__mark-list
		
		& &__mark

		& &__rating-star

		& &__rating-star + &__mark-time
			// display: block

	.dividing-line
		margin-top: 24px

	.entity-sort
		& &__entity
			flex-basis: 50%
			// margin-left: 10px
			// margin-right: 10px
		& &__entity-img
			height: 130px

	.review-head
		& &__info
			float: unset
		& &__actions
			float: unset
	
	.track-carousel
		&__content
			padding-bottom: 10px
		&__track
			min-width: 31%
			max-width: 31%
			margin-right: 4.5%


// Medium devices (tablets, 768px and up)
@media (max-width: $medium-devices)
	pass
// Large devices (desktops, 992px and up)
@media (max-width: $large-devices)
	.main-section-wrapper
		padding: $main-section-padding-mobile
	
	.entity-detail
		display: flex
		& &__info
			// display: flex
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
	pass