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

$-avatar-size = 64px
$-avatar-size-small = ceil($-avatar-size * 0.75)
$-card-spacing = 8px

.community-chunk
	position: relative
	display: flex
	flex-direction: column
	width: 100%
	padding-left: $grid-gutter-width-xs * 0.5
	padding-right: $grid-gutter-width-xs * 0.5

	@media $media-xs
		padding-left: 0
		padding-right: 0

		.-header
			padding-left: $grid-gutter-width-xs * 0.5
			padding-right: $grid-gutter-width-xs * 0.5

		.-content
			padding-left: $grid-gutter-width-xs * 0.5
			padding-right: $grid-gutter-width-xs * 0.5

.-thumbnail
	position: relative
	user-select: none
	flex: none

	&-inner
		img-circle()
		padding: $border-width-large
		background-color: var(--theme-fg)
		overflow: hidden
		width: $-avatar-size
		height: $-avatar-size

		@media $media-xs
			width: $-avatar-size-small
			height: $-avatar-size-small

	&-verified
		img-circle()
		position: absolute
		right: 0
		bottom: 0
		z-index: 1
		color: var(--theme-bg)
		background-color: var(--theme-fg)

.-header
	display: flex
	padding-bottom: $grid-gutter-width-xs * 0.5
	align-items: center

	&-button
		margin-left: auto

	&-lead
		display: flex
		align-items: flex-end
		min-width: 0

		&:hover
			.-header-name
				text-decoration: underline

	&-details
		display: flex
		flex-flow: column nowrap
		justify-content: space-between
		color: var(--theme-fg)
		min-width: 0
		flex: auto
		margin-left: 8px
		margin-right: 4px

	&-name
		text-overflow()
		font-weight: bold
		font-size: $font-size-large

	&-members
		text-overflow()
		font-size: $font-size-small
		color: var(--theme-fg-muted)

	&-membership
		margin-left: 16px

.-content
	display: flex

	@media $media-xs
		padding-bottom: 12px

		.-card
			min-width: 'calc(min(40vw - %s, 60vh * (10 / 16)))' % $-card-spacing !important

	.-card
		flex: auto
		min-width: 0

.-spacer
	flex: none
	width: $-card-spacing

	&-large
		flex: none
		width: $grid-gutter-width-xs * 0.5
