@require 'nib'
@require '~modul-markup-common/markup/stylus/variables'
@require '~modul-markup-common/markup/stylus/icons'

$prefix-timeline = ant-timeline;

.{$prefix-timeline}-item
	position relative
	padding 12px
	font-size $fz-small
	&:hover
		.ant-timeline__date
			color $cl-text
			transform translateX(12px)

		.{$prefix-timeline}-item-head
			&::before
				transform scale(1.1)

	&:not(:last-child)
		.{$prefix-timeline}-item-tail
			position absolute
			top 34px
			bottom -6px
			left 13px
			width 2px
			background-color $ca-graphite-7


.{$prefix-timeline}-item-head
	position absolute
	left 4px
	top 10px
	width 20px
	height @width
	border-radius @width

	&::before
		width 20px
		height @width
		line-height @width !important
		font-icon 'clock'
		font-size $fz-xsmall
		color $cl-white
		background-color $cl-blue-1
		border-radius @width
		transition transform .2s



.{$prefix-timeline}-item-content
	display flex
	justify-content flex-start
	align-items flex-start
	padding-left 20px


.{$prefix-timeline}__date
	flex-shrink 0
	padding 0 12px
	box-sizing border-box
	width 140px
	color $cl-text-light
	transform translateX(0px)
	transition color .1s,
			   transform .1s


.{$prefix-timeline}__title
	font-weight $fw-medium


.{$prefix-timeline}__desc
	margin-top 4px
	max-width 400px
	overflow-wrap break-word
	word-wrap break-word
	color $cl-text-light