.l_left footer.footer
  margin: 0.5rem var(--gap-base) 1rem

.social-wrap
  display: flex
  flex-wrap: wrap
  gap: 0.5rem
  align-items: center
  text-align: center
  .social
    line-height: 0
    display: inline-flex
    align-items: center
    box-sizing: border-box
    flex: 0 0 auto
    height: 32px
    padding: 4px
    border-radius: 8px
    filter: grayscale(100%)
    overflow: hidden
    background: var(--ui-item-bg)
    box-shadow: none
    img
      flex: initial
      width: 24px
      height: 24px
      object-fit: contain
      border-radius: 2px
    svg
      flex: initial
      height: 24px
      width: 24px

  .social-spacer
    flex: 1 1 0
    min-width: 0
    height: 32px
    pointer-events: none

  .social-dropdown
    position: relative
    box-sizing: border-box
    flex: 0 0 auto
    height: 32px
    line-height: 0
    >.dropdown-trigger.social
      >img, >svg
        opacity: .5
    // JS 未加载时保留向上展开的原生 details 兜底；正常情况下菜单会移入全局浮层。
    >.dropdown-menu
      top: auto
      bottom: calc(100% + 0.5rem)
    &:first-child:not(:last-child) >.dropdown-menu, &:only-child >.dropdown-menu
      left: 0
      transform: none
    &:last-child:not(:first-child) >.dropdown-menu
      right: 0
      left: auto
      transform: none

  .social:hover
    background: var(--ui-item-bg-hover)
    box-shadow: var(--ui-item-shadow-hover)

  .social-dropdown[open] > .dropdown-trigger.social
    background: var(--ui-item-bg-active)
    box-shadow: var(--ui-item-shadow-active)

  .social:hover, .social-dropdown[open] > .dropdown-trigger.social
    z-index: 1
    filter: unset
    >img, >svg
      opacity: 1
    svg [fill="currentColor"]
      fill: var(--item-grad)
    svg [stroke="currentColor"]
      stroke: var(--item-grad)