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

.-container
	max-width: 300px

	@media $media-xs
		max-width: 250px

.-community-item
.-channel-item
	display: flex
	align-items: center

	.-text
		text-overflow()

.-selected
	change-bg('bg-offset')

	&.-initial
		cursor: default

	&:hover
		.-back
			opacity: 1

.-community-img
.-back
	img-circle()
	display: flex
	align-items: center
	width: 32px
	height: 32px
	flex-shrink: 0

.-community-img
	overflow: hidden
	margin-right: 8px

.-back
	position: absolute
	justify-content: center
	margin: 0
	background-color: var(--theme-bi-bg)
	color: var(--theme-bi-fg)
	opacity: 0
	transition: opacity 300ms $strong-ease-out

.-tick
	margin-left: 4px
