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

// Most of this styling needs to be done globally.
.timeline-list
	$-connector-width = 2px
	$-padding-left = $timeline-list-avatar-margin + $timeline-list-icon-size

	&-item
		position: relative
		display: block
		color: inherit

		&-bubble
			change-bg('bg-offset')
			theme-prop('color', 'fg-muted')
			img-circle()
			position: absolute
			left: 0
			top: 0
			width: $timeline-list-icon-size
			height: $timeline-list-icon-size
			line-height: $timeline-list-icon-size
			border: 2px solid var(--theme-bg-actual)
			border-width: 2px
			border-style: solid
			z-index: 1

			.timeline-list-item.active, .timeline-list-item.new
				&
					theme-prop('border-color', 'notice')

					.timeline-list-item-bubble-inner
						height: 100%
						change-bg('bg')
						padding: 2px
						img-circle()

		&-main
			clearfix()
			padding-bottom: $line-height-computed
			padding-left: $-padding-left

		&-meta
			theme-prop('color', 'fg-muted')
			margin-bottom: 10px
			font-size: $font-size-tiny

		&-title
			theme-prop('color', 'fg')
			display: block
			font-size: $font-size-h4

			em
				theme-prop('color', 'link')
				font-style: normal
				font-weight: bold

		&-title-small
			font-size: $font-size-base

		&-details
			margin-top: 5px

		&-content
			theme-prop('color', 'fg')

			p:last-child
				margin-bottom: 0

		&-thumb, &-avatar
			img-circle()
			float: left
			width: $timeline-list-avatar-size
			height: $timeline-list-avatar-size
			margin-right: $timeline-list-avatar-margin

		&-thumb
			rounded-corners-lg()
			change-bg('bg-offset')
			background-repeat: no-repeat
			background-position: center center
			background-size: cover

		&-ad
			theme-prop('border-left-color', 'bg-subtle')
			margin-left: ($timeline-list-icon-size / 2)
			padding-bottom: $line-height-computed
			border-left-width: $-connector-width
			border-left-style: solid

			section
				border-top-right-radius: $border-radius-large
				border-bottom-right-radius: $border-radius-large

			&-container
				margin: 0 auto
				width: 300px
				height: 250px
				margin-bottom: 10px

		&-split
			full-bleed-xs()
			theme-prop('border-top-color', 'bg-subtle')
			border-top-width: $border-width-small
			border-top-style: solid
			margin-top: 0
			margin-bottom: $line-height-computed

		&-connector
			display: none
			position: absolute
			top: 0
			bottom: 0
			left: ($timeline-list-icon-size / 2) - ($-connector-width / 2)
			width: $-connector-width
			background-color: var(--theme-bg-subtle)

			.timeline-list-item.is-thread &
				display: block

			.timeline-list-item.is-last &
				display: none
