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

.-backdrop
	// For some reason we need position static
	// so the backdrop can get the height.
	position: static

.-community-container
	clearfix()
	full-bleed-xs()
	rounded-corners-lg()
	position: relative
	margin-bottom: $line-height-computed
	overflow: hidden
	padding: 10px 15px
	elevate-hover-2()

	&:hover
		.-header
			background-size: 105% auto
			filter: blur(1px)

.-header
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	z-index: 0
	background-size: 100% auto
	background-repeat: no-repeat
	background-position: center center
	transition: background-size 250ms, filter 250ms

	&-gradient
		width: 100%
		height: 100%
		background: rgba(0, 0, 0, 0.6)

.-content
	position: relative
	z-index: 1
	display: flex
	align-items: center

.tag
	// This makes all the text align at the left.
	margin-left: -4px

.-name
	font-weight: bolder
	font-size: $font-size-h4

.-thumbnail
	width: 50px
	height: 50px
	background-color: var(--theme-white)
	border-radius: 50%
	padding: 2px
	margin-right: ($grid-gutter-width / 4)
	flex-shrink: 0

	img
		display: block
		width: 100%
		height: 100%
		img-circle()

.-member-count
	font-size: $font-size-small
