.share-buttons
  margin-top: .75rem

.share-buttons__items
  display: flex
  gap: .5rem
  @media (max-width: 20em)
    gap: .25rem

.share-buttons__item
  @media (max-width: 20em)
    &.is-x
      flex: 1


.x-share-button
  width: 5.5rem
  height: 2.5rem
  background-color: white
  +flex-link
  flex-direction: column
  border-radius: .25rem
  align-items: center
  justify-content: center
  +text-block(.6875rem 1, 700)
  color: var(--reversal-text)
  border: solid 1px black
  overflow: hidden
  i
    font-size: .875rem
    color: black
    flex: 1
    width: 100%
    display: flex
    align-items: center
    justify-content: center
    transition: all .2s ease-out
  span
    background-color: var(--default-text)
    display: flex
    width: 100%
    height: 1.25rem
    align-items: center
    justify-content: center
    transition: all .2s ease-out
    padding-top: 1px
  &:hover
    i
      background-color: var(--background-tint)
    span
      background-color: black
  @media (max-width: 20em)
    width: 100%
