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

.community-channel-card
	elevate-hover-1()
	position: relative
	display: block
	flex-shrink: 0
	max-height: $card-height
	overflow: hidden
	cursor: pointer
	outline: none
	transition: border 200ms
	// Overwrite sheet styling
	margin-bottom: ($line-height-computed / 2)

	&-container
		max-width: $card-width

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

		.-card-bg-img
		.-card-unpublished
			filter: grayscale(0.6)

		.-overlay
			opacity: 0

	&.-active
		elevate-2()
		border-color: var(--theme-link)

		.-card-bg-img
			filter: none !important
			transform: scale(1.1)

		.-card-unpublished
			transform: scale(1.1)

		.-overlay
			opacity: 0

		.-card-content-title
			background-color: var(--theme-bi-bg)
			color: var(--theme-bi-fg)

.-overlay
	change-bg('bg-offset')
	position: absolute
	opacity: 0.2
	width: 100%
	height: 100%
	transition: opacity 200ms

.-card
	&-bg
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		z-index: 1

		&-img
			position: absolute
			top: 0
			left: 0
			width: 100%
			height: 100%
			background-size: cover
			background-position: center center
			background-repeat: no-repeat
			filter: grayscale(0.9)
			transition: transform 200ms, filter 200ms

	&-content
		position: relative
		z-index: 3
		margin: 8px
		display: flex
		justify-content: space-between

		&-title
			rounded-corners()
			text-overflow()
			font-weight: 600
			padding: 2px 6px
			background-color: var(--theme-darkest)
			color: var(--dark-theme-fg)

			& > *
				vertical-align: middle

		&-unread
			margin-top: 4px
			width: 12px
			height: 12px
			background-color: var(--theme-notice)
			flex-shrink: 0
			border: 2px solid var(--theme-bg-offset)
			border-radius: 50%
			filter: drop-shadow(0 0 7px var(--theme-notice))

	&-unpublished
		position: absolute
		z-index: 2
		top: 0
		left: 0
		width: 100%
		height: 100%
		background: repeating-linear-gradient(
			45deg,
			var(--theme-bi-bg),
			var(--theme-bi-bg) 8px,
			transparent 8px,
			transparent 16px
		)
		filter: grayscale(0.6)
		opacity: 0.15
		transition: transform 200ms, filter 200ms
