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

.user-box-exp
	color: $dark-theme-fg-muted
	margin-bottom: 10px

	&-stats
		clearfix()
		font-size: $font-size-tiny

		&-current
			float: left

		&-next
			float: right
			text-align: right
			position: relative
			top: 7px

		em, strong
			display: inline-block
			margin: 5px

		em
			theme-prop('color', 'highlight')
			font-family: $font-family-heading
			font-size: $font-size-large
			font-style: normal
			font-weight: 300

		strong
			color: $dark-theme-fg
			font-size: $font-size-small
			font-weight: bold

		&-help
			display: inline-block
			vertical-align: text-bottom

			a
				display: inline-block
				padding: 0 5px
				color: $dark-theme-fg

				&:hover
					theme-prop('color', 'highlight')

	&-progress
		clearfix()

		> .jolticon
			theme-prop('color', 'highlight')
			float: left

		.progress
			position: relative
			top: 5px
			margin-left: 30px
			margin-bottom: 0
