@use 'sass:color'

@keyframes timeline-enter-animation-mask-animation
  to
    height: 0

.timeline-enter-animation-mask
  position: absolute
  left: 0
  top: 0
  height: calc(100% + 300px)
  width: 100%
  background: linear-gradient(to top, #ffffff00 0, 200px, white 300px, white)
  z-index: 100
  animation: timeline-enter-animation-mask-animation 5s 0.3s forwards // Give it 0.3s to load, which I think is reasonable

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

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

    &.start
      height: 20px
      flex: 0 0 auto

    &.end
      flex: 1 1 auto

    &.current-end
      height: 20px
      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


.current
  .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-pt-start
  padding-top: 18px

.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

textarea.timeline-post-edit
  @extend .border-primary
  @extend .rounded

  &:focus
    outline: none
    box-shadow: 0 0 5px 0 $primary