code-lab/node_modules/vuetify/lib/components/VTimeline/VTimeline.sass

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

@include tools.layer('components')
  // 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