@use 'sass:color'

.timeline
  z-index: 0
  position: relative

  background-image: url("views/timeline-common/timeline-background.svg")
  background-size: 100% auto
  background-repeat: no-repeat repeat

  &-item
    position: relative
    padding: 0.5em

$timeline-line-width: 7px
$timeline-line-node-radius: 18px
$timeline-line-color: $primary
$timeline-line-color-current: #36c2e6

@keyframes timeline-line-node-noncurrent
  from
    background: $timeline-line-color

  to
    background: color.adjust($timeline-line-color, $lightness: +10%)
    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1)

@keyframes timeline-line-node-current
  from
    background: $timeline-line-color-current

  to
    background: color.adjust($timeline-line-color-current, $lightness: +10%)
    box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)

.timeline-line
  &-area-container
    position: absolute
    display: flex
    justify-content: flex-end
    padding-right: 5px
    z-index: 1

    top: 0em
    bottom: 0em
    left: 0.5em
    width: 60px
    transition: width 0.8s

    @include media-breakpoint-down(sm)
      width: 40px

  &-area
    display: flex
    flex-direction: column
    align-items: center
    width: 30px

  &-segment
    width: $timeline-line-width
    background: $timeline-line-color

    &.start
      height: 1.4em
      flex: 0 0 auto

    &.end
      flex: 1 1 auto

    &.current-end
      height: 2em
      flex: 0 0 auto
      background: linear-gradient($timeline-line-color-current, transparent)

  &-node-container
    flex: 0 0 auto
    position: relative
    width: $timeline-line-node-radius
    height: $timeline-line-node-radius

  &-node
    width: $timeline-line-node-radius + 2
    height: $timeline-line-node-radius + 2
    position: absolute
    left: -1px
    top: -1px
    border-radius: 50%
    box-sizing: border-box
    z-index: 1
    animation: 1s infinite alternate
    animation-name: timeline-line-node-noncurrent

.timeline-top
  position: relative
  text-align: right

  .timeline-line-segment
    flex: 1 1 auto

.current
  &.timeline-item
    padding-bottom: 2.5em

  .timeline-line
    &-segment

      &.start
        background: linear-gradient($timeline-line-color, $timeline-line-color-current)

      &.end
        background: $timeline-line-color-current

    &-node
      animation-name: timeline-line-node-current

.timeline-item-card
  @extend .cru-card
  @extend .clearfix
  position: relative
  padding: 0.5em 2em 0.5em 60px
  transition: background 0.5s, padding-left 0.8s

  @include media-breakpoint-down(sm)
    padding-left: 40px

  &:hover
    background: $gray-200

.timeline-item-delete-button
  position: absolute
  right: 0
  bottom: 0

.timeline-content
  white-space: pre-line

.timeline-content-image
  max-width: 60%
  max-height: 200px

.timeline-post-edit-image
  max-width: 100px
  max-height: 100px

.mask
  background: change-color($color: white, $alpha: 0.8)
  z-index: 100

.timeline-sync-state-badge
  font-size: 0.8em
  padding: 3px 8px
  border-radius: 5px
  background: #e8fbff

.timeline-sync-state-badge-pin
  display: inline-block
  width: 0.4em
  height: 0.4em
  border-radius: 50%
  vertical-align: middle
  margin-right: 0.6em

.timeline-template-card
  position: fixed
  z-index: 1
  top: 56px
  right: 0
  margin: 0.5em