@use 'sass:color'

.timeline
  z-index: 0
  position: relative
  width: 100%
  overflow-wrap: break-word

$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
  display: flex
  flex-direction: column
  align-items: center
  width: 30px

  position: absolute
  z-index: 1
  left: 2em
  top: 0
  bottom: 0

  transition: left 0.5s

  @include media-breakpoint-down(sm)
    left: 1em

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

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

    &.end
      flex: 1 1 auto

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

  .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

.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-top
  position: relative
  text-align: right

.timeline-item
  position: relative
  padding: 0.5em

.timeline-item-card
  @extend .cru-card
  position: relative
  padding: 0.3em 0.5em 1em 4em
  transition: background 0.5s, padding-left 0.5s

  @include media-breakpoint-down(sm)
    padding-left: 3em

.timeline-item-header
  display: flex
  align-items: center
  @extend .my-2

.timeline-avatar
  border-radius: 50%
  width: 2em
  height: 2em

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

.timeline-content
  white-space: pre-line

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

.timeline-date-item
  position: relative
  padding: 0.3em 0 0.3em 4em

.timeline-date-item-badge
  display: inline-block
  padding: 0.1em 0.4em
  border-radius: 0.4em
  background: #7c7c7c
  color: white
  font-size: 0.8em

.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: 1031
  top: 56px
  right: 0
  margin: 0.5em

.timeline-markdown-post-edit-page
  overflow: scroll
  max-height: 300px

.timeline-markdown-post-edit-image-container
  position: relative
  text-align: center
  margin-bottom: 1em

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

.timeline-markdown-post-edit-image-delete-button
  position: absolute
  right: 10px
  top: 2px