@require '~styles/variables'
@require '~styles-lib/mixins'

$score-list-avatar-size-xs = 50px
$score-list-avatar-size = 100px
$score-list-gutter-xs = ($grid-gutter-width-xs / 2)
$score-list-gutter = ($grid-gutter-width / 2)

.score-list-item
	position: relative

.score-list-media
	float: left
	width: ($score-list-avatar-size-xs - $score-list-gutter-xs)

	@media $media-sm-up
		width: ($score-list-avatar-size - $score-list-gutter)

.score-list-rank
	@media $media-xs
		theme-prop('color', 'fg-muted')
		float: right
		margin-left: $score-list-gutter-xs
		font-size: $font-size-h4
		font-family: $font-family-heading
		font-weight: bold

	@media $media-sm-up
		theme-prop('color', 'highlight')
		change-bg('darkest')
		rounded-corners()
		position: absolute
		left: 0
		top: 0
		line-height: 25px
		height: 25px
		font-weight: bold
		text-align: right
		padding: 0 4px

@media $media-sm-up
	.score-list-rank-sign
		color: $dark-theme-fg-muted
		font-size: $font-size-tiny
		position: relative
		top: -3px

.score-list-content
	margin-left: $score-list-avatar-size-xs

	@media $media-sm-up
		margin-left: $score-list-avatar-size

.score-list-title
	text-overflow()
	font-family: $font-family-heading

	@media $media-sm-up
		font-weight: bold

.score-list-user
	text-overflow()
	font-size: $font-size-small

	@media $media-sm-up
		font-size: $font-size-base
