@use 'sass:color'

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

$timeline-line-width: 7px
$timeline-line-node-radius: 18px
$timeline-line-color: var(--tl-primary-color)
$timeline-line-color-current: var(--tl-primary-enhance-color)

@keyframes timeline-line-node-noncurrent
  to
    box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color)

@keyframes timeline-line-node-current
  to
    box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color)

@keyframes timeline-line-node-loading
  to
    box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color)

@keyframes timeline-line-node-loading-edge
  from
    transform: rotate(0turn)
  to
    transform: rotate(1turn)

@keyframes timeline-enter
  from
    transform: translate(0, -100vh)

@keyframes timeline-top-loading-enter
  from
    transform: translate(0, -100%)

@keyframes timeline-post-enter
  from
    transform: translate(0, -100%)
    opacity: 0

  to
    opacity: 1

.timeline-top-loading-enter
  animation: 1s timeline-top-loading-enter

.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
    background: $timeline-line-color
    left: -1px
    top: -1px
    border-radius: 50%
    box-sizing: border-box
    z-index: 1
    animation: 1s infinite alternate
    animation-name: timeline-line-node-noncurrent

  .node-loading-edge
    color: $timeline-line-color
    width: $timeline-line-node-radius + 20
    height: $timeline-line-node-radius + 20
    position: absolute
    left: -10px
    top: -10px
    box-sizing: border-box
    z-index: 2
    animation: 1.5s linear infinite timeline-line-node-loading-edge

  &.current
    .segment
      &.start
        background: linear-gradient($timeline-line-color, $timeline-line-color-current)
      &.end
        background: $timeline-line-color-current
    .node
      background: $timeline-line-color-current
      animation-name: timeline-line-node-current

  &.loading
    .node
      background: $timeline-line-color
      animation-name: timeline-line-node-loading

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

.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
  animation: 0.6s forwards
  opacity: 0

  @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
  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

.connection-status-badge
  font-size: 0.8em
  border-radius: 5px
  padding: 0.1em 1em
  background-color: rgb(234 242 255)

  &::before
    width: 10px
    height: 10px
    border-radius: 50%
    display: inline-block
    content: ''
    margin-right: 0.6em

  &.success
    color: #006100
    &::before
      background-color: #006100

  &.warning
    color: #e4a700
    &::before
      background-color: #e4a700

  &.danger
    color: #fd1616
    &::before
      background-color: #fd1616