$archive-year-font-size = 1.6rem
$post-title-font-size = 1.2rem
$post-date-font-size = 1rem
$post-date-width = 3.6rem
$post-item-padding = 1.2rem
$timeline-circle-size = 0.5rem

.archive-list-container {

  .archive-item {
    margin-bottom var(--component-gap)

    &:last-child {
      margin-bottom 0
    }

    .archive-item-header {
      margin-bottom 0.8rem

      .archive-year {
        margin-right 6px
        color var(--text-color-2)
        font-weight 600
        font-size $archive-year-font-size

        +keep-tablet() {
          font-size $archive-year-font-size * 0.9
        }
      }
    }


    .archive-item-body {
      padding-left $post-item-padding

      .post-item {
        display flex
        align-items center
        justify-content space-between
        width 100%
        padding ($post-item-padding * 0.8) 0 ($post-item-padding * 0.8) $post-item-padding * 1.6
        font-size 1rem

        .starting-point {
          position absolute
          top 0
          left 0
          width 1rem
          height 100%


          &::after {
            position absolute
            top 0
            left 50%
            z-index $z-index-1
            box-sizing border-box
            width 0
            height 100%
            border-left 1px dashed var(--text-color-5)
            transform translateX(-50%)
            content ''
          }


          &::before {
            top 50%
            left 0
            z-index $z-index-2
            box-sizing border-box
            width $timeline-circle-size
            height $timeline-circle-size
            background var(--text-color-5)
            border-radius 50%
            content ''
            transition-t("height", "0", "0.2", "ease")
          }
        }


        &:hover {
          .starting-point {
            &::before {
              width $timeline-circle-size * 1.2
              height $timeline-circle-size * 1.2
              background var(--text-color-4)
            }
          }

          a.post-title {
            color var(--primary-color)
          }
        }


        .post-date {
          width $post-date-width
          margin-right $post-item-padding
          color var(--text-color-3)
          font-size $post-date-font-size
        }


        a.post-title {
          width 'calc(100% - %s)' % $post-date-width
          color var(--text-color-3)
        }
      }
    }
  }
}