@use 'sass:map'
@use 'sass:math'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
@use './mixins' as *

// VTimeline
.v-timeline
  .v-timeline-divider__dot
    background: $timeline-dot-divider-background

  .v-timeline-divider__inner-dot
    background: $timeline-inner-dot-divider-background

.v-timeline
  display: grid
  grid-auto-flow: dense
  position: relative

  @include horizontal(true)
    grid-column-gap: $timeline-item-padding
    width: 100%

    .v-timeline-item:nth-child(2n)
      .v-timeline-item__body
        grid-row: 3
        padding-block-start: $timeline-item-padding

      .v-timeline-item__opposite
        grid-row: 1
        padding-block-end: $timeline-item-padding
        align-self: flex-end

    .v-timeline-item:nth-child(2n+1)
      .v-timeline-item__body
        grid-row: 1
        padding-block-end: $timeline-item-padding
        align-self: flex-end

      .v-timeline-item__opposite
        grid-row: 3
        padding-block-start: $timeline-item-padding

  @include vertical(true)
    row-gap: $timeline-item-padding
    height: 100%

    @include timeline-first-item()
      padding-block-start: $timeline-item-padding

    @include timeline-last-item()
      padding-block-end: $timeline-item-padding

    .v-timeline-item:nth-child(2n)
      .v-timeline-item__body
        grid-column: 1
        padding-inline-end: $timeline-item-padding

      .v-timeline-item__opposite
        grid-column: 3
        padding-inline-start: $timeline-item-padding

    .v-timeline-item:nth-child(2n+1)
      .v-timeline-item__body
        grid-column: 3
        padding-inline-start: $timeline-item-padding

      .v-timeline-item__opposite
        grid-column: 1
        justify-self: flex-end
        padding-inline-end: $timeline-item-padding

// VTimelineItem
.v-timeline-item
  display: contents

// VTimelineDivider
.v-timeline-divider
  position: relative
  display: flex
  align-items: center

  @include horizontal
    flex-direction: row
    grid-row: 2
    width: 100%

  @include vertical
    height: 100%
    flex-direction: column
    grid-column: 2

$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
$timeline-line-start: math.div(-$timeline-item-padding, 2)
$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))

.v-timeline-divider__before
  background: $timeline-divider-line-background
  position: absolute

  @include horizontal
    height: $timeline-divider-line-thickness
    width: $timeline-line-size
    inset-inline-start: $timeline-line-start
    inset-inline-end: initial

  @include vertical
    height: $timeline-line-size
    width: $timeline-divider-line-thickness
    top: $timeline-line-start

.v-timeline-divider__after
  background: $timeline-divider-line-background
  position: absolute

  @include horizontal
    height: $timeline-divider-line-thickness
    width: $timeline-line-size
    inset-inline-end: $timeline-line-start
    inset-inline-start: initial

  @include vertical
    height: $timeline-line-size
    width: $timeline-divider-line-thickness
    bottom: $timeline-line-start

.v-timeline-item:first-child
  .v-timeline-divider__before
    @include vertical
      height: $timeline-line-size
      top: 0

    @include horizontal
      width: $timeline-line-size
      inset-inline-start: 0
      inset-inline-end: initial

  .v-timeline-divider__after
    @include vertical
      height: $timeline-line-size-first-last

    @include horizontal
      width: $timeline-line-size-first-last
      inset-inline-end: $timeline-line-start
      inset-inline-start: initial

.v-timeline-item:last-child
  .v-timeline-divider__before
    @include vertical
      height: $timeline-line-size-first-last

    @include horizontal
      width: $timeline-line-size-first-last

  .v-timeline-divider__after
    @include vertical
      height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
      bottom: 0

    @include horizontal
      width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
      inset-inline-end: 0
      inset-inline-start: initial

.v-timeline-item:only-child
  .v-timeline-divider__after
    @include vertical
      height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset))

.v-timeline-divider__dot
  z-index: 1
  flex-shrink: 0
  border-radius: $timeline-dot-border-radius
  display: flex
  justify-content: center
  align-items: center

  @include tools.elevation($timeline-divider-dot-elevation)

  @each $name, $multiplier in settings.$size-scales
    $size: $timeline-dot-size + (8 * $multiplier)

    &--size-#{$name}
      height: $size
      width: $size

      .v-timeline-divider__inner-dot
        height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
        width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})

.v-timeline-divider__inner-dot
  align-items: center
  border-radius: $timeline-dot-border-radius
  display: flex
  justify-content: center

/** Modifiers **/

// Justify
.v-timeline--justify-center
  @include horizontal(true)
    grid-template-rows: $timeline-item-grid-template-center

  @include vertical(true)
    grid-template-columns: $timeline-item-grid-template-center

.v-timeline--justify-auto
  @include horizontal(true)
    grid-template-rows: $timeline-item-grid-template-auto

  @include vertical(true)
    grid-template-columns: $timeline-item-grid-template-auto

// Density
.v-timeline--density-comfortable
  @include horizontal(true)
    height: 100%

    &.v-timeline--side-end
      grid-template-rows: $timeline-density-comfortable-grid-template-end

    &.v-timeline--side-start
      grid-template-rows: $timeline-density-comfortable-grid-template-start

  @include vertical(true)
    width: 100%

    &.v-timeline--side-end
      grid-template-columns: $timeline-density-comfortable-grid-template-end

    &.v-timeline--side-start
      grid-template-columns: $timeline-density-comfortable-grid-template-start

.v-timeline--density-compact
  @include horizontal(true)
    &.v-timeline--side-end
      grid-template-rows: $timeline-density-compact-grid-template-end

    &.v-timeline--side-start
      grid-template-rows: $timeline-density-compact-grid-template-start

    .v-timeline-item__body
      grid-row: 1

  @include vertical(true)
    &.v-timeline--side-end
      grid-template-columns: $timeline-density-compact-grid-template-end

    &.v-timeline--side-start
      grid-template-columns: $timeline-density-compact-grid-template-start

    .v-timeline-item__body
      grid-column: 3

// Side
.v-timeline.v-timeline--side-end
  .v-timeline-item
    @include horizontal(true)
      .v-timeline-item__body
        grid-row: 3
        padding-block-end: initial
        padding-block-start: $timeline-item-padding

      .v-timeline-item__opposite
        grid-row: 1
        padding-block-end: $timeline-item-padding
        padding-block-start: initial

    @include vertical(true)
      .v-timeline-item__body
        grid-column: 3
        padding-inline-start: $timeline-item-padding
        padding-inline-end: initial
        justify-self: flex-start

      .v-timeline-item__opposite
        grid-column: 1
        justify-self: flex-end
        padding-inline-end: $timeline-item-padding
        padding-inline-start: initial

.v-timeline.v-timeline--side-start
  .v-timeline-item
    @include horizontal(true)
      .v-timeline-item__body
        grid-row: 1
        padding-block-end: $timeline-item-padding
        padding-block-start: initial

      .v-timeline-item__opposite
        grid-row: 3
        padding-block-end: initial
        padding-block-start: $timeline-item-padding

    @include vertical(true)
      .v-timeline-item__body
        grid-column: 1
        justify-self: flex-end
        padding-inline-end: $timeline-item-padding

      .v-timeline-item__opposite
        grid-column: 3
        padding-inline-start: $timeline-item-padding
        justify-self: flex-start

// Fill dot
.v-timeline-divider--fill-dot
  .v-timeline-divider__inner-dot
    height: inherit
    width: inherit

// Alignment
.v-timeline--align-center
  --v-timeline-line-size-base: 50%
  --v-timeline-line-size-offset: 0px

  @include horizontal(true)
    justify-items: center

    .v-timeline-item__body
      padding-inline: math.div($timeline-item-padding, 2)

    .v-timeline-item__opposite
      padding-inline: math.div($timeline-item-padding, 2)

    .v-timeline-divider
      justify-content: center

  @include vertical(true)
    align-items: center

    .v-timeline-divider
      justify-content: center

.v-timeline--align-start
  --v-timeline-line-size-base: 100%
  --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}

  $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
  $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))

  .v-timeline-item:first-child
    .v-timeline-divider__before
      --v-timeline-line-size-offset: #{$timeline-item-padding}

    .v-timeline-divider__after
      --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}

  .v-timeline-item:last-child
    .v-timeline-divider__after
      --v-timeline-line-size-offset: 0px

  @include horizontal(true)
    justify-items: flex-start

    .v-timeline-divider
      justify-content: flex-start

      .v-timeline-divider__before
        width: $timeline-line-size-before

      .v-timeline-divider__after
        width: $timeline-line-size-after

  @include vertical(true)
    align-items: flex-start

    .v-timeline-divider
      justify-content: flex-start

      .v-timeline-divider__before
        height: $timeline-line-size-before

      .v-timeline-divider__after
        height: $timeline-line-size-after

// Truncate start
.v-timeline--truncate-line-start
  .v-timeline-item:first-child
    .v-timeline-divider__before
      display: none

    .v-timeline-divider__after
      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}

  @include vertical(true)
    @include timeline-first-item()
      padding-block-start: 0

  @include horizontal(true)
    @include timeline-first-item()
      padding-inline-start: 0

// Truncate end
.v-timeline--truncate-line-end
  .v-timeline-item:last-child
    .v-timeline-divider__after
      display: none

    .v-timeline-divider__before
      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}

  @include vertical(true)
    @include timeline-last-item()
      padding-block-end: 0

  @include horizontal(true)
    @include timeline-last-item()
      padding-inline-end: 0