@import '~styles/variables'
@import '~styles-lib/mixins'
@import '../common'

.-bubble
	img-circle()
	padding: 2px
	margin-left: -2px
	margin-right: -2px
	position: relative

.-backdrop
	change-bg('bg-offset')
	border: 2px solid var(--theme-bg-actual)
	width: $-size-xs
	height: $-size-xs

	@media $media-sm-up
		width: $-size
		height: $-size

.-label
	text-overflow()
	theme-prop('color', 'fg')
	font-weight: bold
	font-size: $font-size-tiny
	text-align: center
	margin-top: 10px
	display: none

	@media $media-md-up
		display: block
		font-size: $font-size-small

		.-item:hover &
			theme-prop('color', 'link')
