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

.-container
	padding: $chat-room-window-padding
	padding-left: 0
	position: relative

.-date-split
	position: relative
	display: block
	margin-top: $line-height-computed
	margin-bottom: $line-height-computed
	width: 100%
	text-align: center
	cursor: default

	&::before
		border-bottom-color: var(--theme-bg-offset)
		content: ''
		position: absolute
		left: 0
		right: 0
		top: 50%
		margin-top: 0
		height: 0
		border-bottom-width: $border-width-large
		border-bottom-style: solid
		z-index: 0

	& > .-inner
		change-bg('bg-offset')
		color: var(--theme-fg-muted)
		position: relative
		padding-left: 8px
		padding-right: 8px
		font-weight: bold
		font-size: $font-size-small
		z-index: 1
		rounded-corners()

.-hr
	margin-top: 0
	margin-bottom: 0
	border: none
	height: $line-height-computed * 0.5

.-intro
	display: flex
	align-items: center
	justify-content: center
	padding-left: $chat-room-window-padding

.-container-scroll-down-indicator
	position: sticky
	bottom: 0
	height: 16px
	width: 100%
	opacity: 0.25
	background: radial-gradient(farthest-corner at 50% 100%, var(--theme-backlight) 0, transparent 70%)
	pointer-events: none
	z-index: 2

	// Makes the indicator more prominent and changes color to notice
	&-new
		opacity: 0.4
		background: radial-gradient(farthest-corner at 50% 100%, var(--theme-notice) 0, transparent 70%)

.fade-enter-active
	transition: height 1000ms $strong-ease-out

.fade-enter
	height: 0
