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

.chat-window-message
	position: relative
	margin-bottom: 4px
	padding-left: $chat-room-window-padding
	line-height: $font-size-base * 1.25
	// This is so no height change occurs when the "NEW" indicator line appears
	border-top-width: 1px
	border-top-style: solid
	border-top-color: transparent

	@media $media-xs
		font-size: $font-size-small
		line-height: $font-size-small * 1.25

	&:hover
	&-options-visible
		background-color: var(--theme-bg-offset)

		.chat-window-message-small-time
			opacity: 1

	&-avatar
		position: absolute
		left: ($left-gutter-size * 0.25) + $chat-room-window-padding
		top: 4px
		width: $avatar-size
		z-index: 1

		@media $media-xs
			// On small screens, reduce the left side margin to make more space for the actual messages.
			left: 4px + $chat-room-window-padding

		& .-chat-window-message-avatar-img
			img-circle()
			elevate-hover-1()

	&-container
		margin-left: $avatar-size + $left-gutter-size
		position: relative
		padding-top: 4px
		padding-left: 4px
		padding-right: 4px
		padding-bottom: 2px

		@media $media-xs
			// On small screens, reduce the left side margin to make more space for the actual messages.
			margin-left: $avatar-size + 12px

	&-small-time
		position: absolute
		left: -($avatar-size) - ($left-gutter-size * 0.75)
		top: 6px
		font-size: $font-size-tiny
		theme-prop('color', 'fg-muted')
		opacity: 0
		user-select: none

		// Never show this on small devices. It's probably a phone anyway, and touch can't activate this.
		@media $media-xs
			display: none

	&-byline-error
		cursor: pointer
		vertical-align: middle

	&-byline-notice
		vertical-align: middle

	&-queue-error
		position: absolute
		left: -($avatar-size) - ($left-gutter-size * 0.5)
		top: 6px
		user-select: none
		cursor: pointer

		@media $media-xs
			left: -($left-gutter-size)

	&-queue-notice
		position: absolute
		left: -($avatar-size) - ($left-gutter-size * 0.5)
		top: 6px
		user-select: none

		@media $media-xs
			left: -($left-gutter-size)

	&-byline
		margin-bottom: 4px

	&-user
		text-overflow()
		display: inline-block
		max-width: 200px
		font-weight: bold
		vertical-align: bottom

	&-username
		theme-prop('color', 'fg-muted')
		font-size: $font-size-tiny
		cursor: default

	&-time
		theme-prop('color', 'fg-muted')
		margin-left: 4px
		font-size: $font-size-tiny
		cursor: default

	// Some different styling for the fade collapse.
	.fade-collapse-collapsed
		theme-prop('border-bottom-color', 'light')
		margin-bottom: 4px
		border-bottom-width: $border-width-base
		border-bottom-style: dashed

		&::before
			theme-prop('background', 'darker', true)
			max-height: 4px !important

	&-options
		visibility: hidden
		position: absolute
		top: 0
		right: 0
		padding: 4px
		z-index: 2

		../:hover &
		.chat-window-message-editing &
		&-open
			visibility: visible

	&-retry
		font-size: $font-size-tiny

	&-content
		display: block
		// If we don't break words then it can make the window too large to try
		// to fit in the text. We also try to hyphenate.
		// Note: hyphens only works on Chrome in Mac and Android.
		// Luckily this is mostly where it matters.
		word-wrap: break-word
		hyphens: auto
		// Try to limit the effects of what zalgo text can do to chat.
		overflow: hidden

.-chat-message-queued
	color: var(--theme-fg-muted)

	.chat-window-message-avatar
		filter: grayscale(0.75) brightness(0.9)

	>>> .content-image
		filter: grayscale(0.75) brightness(0.9)

	>>> .emoji
		filter: grayscale(1) brightness(0.9)

	>>> .content-gif
		filter: grayscale(0.75) brightness(0.9)

.-chat-message-new
	border-top-color: var(--theme-notice)

	&::before
		content: 'NEW'
		position: absolute
		z-index: 2
		right: 0
		top: -7px
		font-size: 9px
		font-weight: bolder
		change-bg('notice')
		color: var(--theme-white)
		padding-left: 4px
		padding-right: 4px
		rounded-corners()
		line-height: 14px

.-edited
	font-size: $font-size-tiny
	cursor: default
	user-select: none
