div.chat
	position: absolute

	top: 0
	right: 0
	bottom: 0
	width: $chatWidth

	border-left: $primaryBorder

	p.chat-no-messages
		color: $primaryLight

		margin-left: 1em
		margin-right: 1em

		opacity: 0.75

		@media screen and (prefers-color-scheme: dark)
			color: $secondaryLight

	p.chat-typing-bar
		position: absolute

		bottom: 90px

		margin: 0 1em

		font-size: 14px
		color: #6d6d6d !important

	div.grouped-chat-messages-wrapper
		position: absolute

		top: 0
		bottom: 80px
		width: calc(100% - 2em)

		padding: 1.5em 1em 0

		overflow-y: auto

		div.grouped-chat-messages
			display: flex
			margin-bottom: 1em

			img.chat-messages-author-avatar
				width: 50px
				height: 50px

				border-radius: 25px

				margin-right: 1.05em

				&.has-control
					box-shadow: 0 0 0 3px $secondary

					@media screen and (prefers-color-scheme: dark)
						box-shadow: 0 0 0 3px $primary

				&.owner
					box-shadow: 0 0 0 3px $ownerColor

				&.admin
					box-shadow: 0 0 0 3px $adminColor

				&.subscriber
					box-shadow: 0 0 0 3px $subscriberColor

				&.team
					box-shadow: 0 0 0 3px $teamColor

			div.chat-messages
				width: 100%

				div.chat-message
					display: flex

					&.is-sending
						opacity: .5

						pointer-events: none

					p.chat-message-content
						margin: 0 0 0.65em

						word-break: break-word

						img.chat-message-emoji
							width: 1em
							height: 1em

							margin: .05em .1em
							vertical-align: -.1em

							&:first-child
								margin-left: 0

							&:last-child
								margin-right: 0

					div.chat-message-options
						position: absolute

						background: rgba(0, 0, 0, 0.75)

						right: 0

						margin-right: 1.5em

						opacity: 0

						img.chat-message-option
							cursor: pointer
							opacity: 0.5

							transition: all 0.1s ease-in-out

							&:hover
								opacity: 0.75

							&:active
								opacity: 1

							&:not(:last-child)
								margin-right: 0.5em

							@media screen and (prefers-color-scheme: dark)
								filter: invert(1)

					&:hover
						div.chat-message-options
							opacity: 1

			div.grouped-chat-messages-meta
				margin-bottom: 0.5em

				p.chat-messages-author-name
					margin: 0

					font-size: 20px
					font-weight: 600

		@media only screen and (max-width: $mobileBreakpoint)
			position: relative

	div.chat-bar-wrapper
		position: absolute

		left: 0
		right: 0
		bottom: 0
		height: 80px

		border-top: $primaryBorder

		input.chat-bar
			position: absolute

			color: $secondary
			background-color: $primary
			// background-color: rgba(0, 0, 0, 0)

			left: 1em
			right: 2em
			width: calc(100% - 5em)
			height: 100%

			padding: 0
			outline: 0

			border: 0
			margin: 0

			font-size: 20px

			@media screen and (prefers-color-scheme: dark)
				color: $primary
				background-color: $secondary

		div.send-button
			position: absolute
			display: flex

			cursor: pointer

			right: 0
			width: 40px
			height: 40px

			margin: 20px
			border-radius: 13px

			background-color: $secondary

			align-items: center
			justify-content: center

			transition: background-color $bounceTransition

			@media screen and (prefers-color-scheme: dark)
				background-color: $primary

			&.disabled
				cursor: not-allowed
				background-color: $secondaryLight

				img.send-button-icon
					@media screen and (prefers-color-scheme: dark)
						filter: invert(0.75)

					// &:not(.disabled)
					// 	@media screen and (prefers-color-scheme: dark)
					// 		filter: invert(0.75)

				@media screen and (prefers-color-scheme: dark)
					background-color: $primaryLight

			img.send-button-icon
				height: 25px

				margin-bottom: 2.25px
				filter: invert(1)

				@media screen and (prefers-color-scheme: dark)
					filter: invert(0)

		@media screen and (prefers-color-scheme: dark)
			border-top: $secondaryBorder

		@media only screen and (max-width: $mobileBreakpoint)
			position: relative

	@media screen and (prefers-color-scheme: dark)
		border-left: $secondaryBorder

	@media only screen and (max-width: $mobileBreakpoint)
		position: relative

		width: 100%
		flex-grow: 1

		border-left: none