.post-list #archive
  padding: 1rem
  .archive-header
    display: inline-block
    font-family: $ff-code
    font-weight: 700
    line-height: 1.2
    margin-bottom: .5em
    position: relative
    padding: 4px 0
    color: var(--text-p1)
    &:after
      content: ""
      position: absolute
      height: 4px
      bottom: 0
      left: 0
      right: 0
      z-index: -1
      border-radius: 4px
      background: var(--theme)

.post-list .archive-list a.post
  display: inline-flex
  align-items: baseline
  margin: 0.25rem 0
  color: var(--text-p1)
  trans2 color border
  border-bottom: 1px dashed var(--text-meta)
  time
    font-family: $ff-code
    margin-right: 1em
    font-weight: 700
    flex-shrink: 0
    color: var(--text-p4)
  &:hover
    border-bottom: 1px solid var(--theme)
    color: var(--text)
    time
      color: var(--theme)



.post-list #cats
  padding: 0
  .cat-item
    display: block
  a.cat
    display: flex
    padding: .5em 1rem
    border-radius: $border-bar
    color: var(--text-p2)
    align-items: center
    justify-content: space-between
    font-weight: 500
    font-size: $fs-content-2
    span
      display: flex
      align-items: center
    svg
      height: 1em
      width: auto
      transform: scale(1.2)
      margin-right: 8px
    .badge
      font-weight: 700
      font-family: $ff-code
      opacity: .5
      font-size: $fs-12
    &:hover
      background: var(--block-border)
      color: var(--text)
      .badge
        opacity: 1
        color: var(--theme)
  .cat-children
    margin-left: 1.25rem
    padding-left: .75rem
    border-left: 1px dashed var(--text-meta)

.post-list #tags
  display: flex
  flex-wrap: wrap
  padding: 0
  margin: 0
  column-gap: 1rem
  a.tag
    tag-chip()
    margin-left: 0
    margin-right: 0

@media screen and (min-width: $device-mobile)
  .post-list.author #archive
    padding: 1rem 0