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

.chat-window-wrap
	position: fixed
	display: flex
	justify-content: center
	align-items: flex-start
	z-index: $zindex-chat-window

.chat-window-back-close
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0
	background: transparent
	z-index: 0

.chat-window
	position: relative
	display: flex
	flex: auto
	justify-content: center
	width: 100%
	height: 100%
	max-width: $chat-room-window-width
	min-width: 0
	z-index: 1

	@media $media-xs
		position: fixed
		top: 0
		right: 0
		left: 0
		bottom: 0
		height: auto !important
		width: auto !important

.chat-window-users
	change-bg('bg-offset')
	position: relative
	padding: 2px 0
	min-width: 0
	z-index: 1

	&-shadow
		position: absolute
		top: 0
		bottom: 0
		left: 0
		width: 8px
		background: linear-gradient(to right, rgba($black, 0.2), transparent)
		z-index: 1

	&-scroller
		height: 100%
		margin-right: 1px

	@media $media-xs
		position: absolute
		top: 0
		right: 0
		bottom: 0
		left: 0
		z-index: 3

	@media $media-sm-up
		flex: auto
		max-width: $shell-pane-width
		margin-top: 20px
		margin-bottom: 20px
		border-top-right-radius: $border-radius-base
		border-bottom-right-radius: $border-radius-base

.chat-window-main
	position: relative
	flex: auto
	display: flex
	flex-direction: column
	min-width: 0
	z-index: 1

/**
 * Chat Window Header
 */
.chat-window-header-wrap
	flex: none
	width: 100%
	font-size: 14px

.chat-window-header
	clearfix()
	padding: $chat-room-window-padding
	border-top-left-radius: $border-radius-base
	border-top-right-radius: $border-radius-base
	display: flex
	align-items: center
	flex-direction: row-reverse

	h2
	h3
		text-overflow()
		margin: 0
		line-height: 1
		padding-bottom: 4px

	&-content
		display: flex
		align-items: center
		margin-right: auto
		min-width: 0

	&-avatar
		margin-right: 16px

		.-icon
			img-circle()
			display: flex
			align-items: center
			justify-content: center
			width: 48px
			height: 48px
			background-color: var(--theme-backlight)

			.jolticon
				font-size: $jolticon-size * 1.5
				color: var(--theme-backlight-fg)

.chat-window-header-controls
	flex: none

.-header-control
	position: relative
	vertical-align: top
	margin-left: 4px

/**
 * Chat Window Output
 */
.chat-window-output
	position: relative
	flex: auto
	display: flex
	height: 100%

	&-inner
		// Allows the scroll bar some breathing room
		margin-right: 4px

	> .scroll-scroller
		position: absolute
		top: 0
		right: 0
		bottom: 0
		left: 0

.chat-window-send-container
	change-bg('bg-backdrop')
	width: 100%
	flex: none

// Center the chat window to the searchbar.
.-chat-window-offset
	&-left
	&-right
		height: 100%

		// Chat takes up the whole screen on this breakpoint, so we can just hide the offsets.
		@media $media-xs
			display: none

	// Push the chat window to the right - similar to doing 'margin-left: auto'.
	&-left
		flex: 1

	&-right
		flex-grow: 1
		flex-shrink: 1000
		// We want to grow equally when above and shrink immensely when below our
		// flex-basis amount, relative to the other flex items. 320px seems to
		// be the value needed for centering on the searchbar in this container.
		flex-basis: 320px
		display: flex

		&.-has-content
			flex-shrink: 2
			min-width: 160px
