.sponsor-wrapper
  display: flex
  justify-content: center
  flex-direction: column
  align-items: center
  margin: 5px 0
  margin-top: 10px

.sponsor-title
  font-size: 18px
  letter-spacing: 2px
  color: var(--color-link)
  opacity: 0.8
  text-decoration: none
  transition: opacity .2s
  display: block
  padding: 10px 0
  font-weight: 700
  user-select: none

.sponsor-icon
  width: 30px
  margin: 0 10px
  opacity: 0.8

  &.rotate
    animation: rotate-all 3s linear infinite

if hexo-config("sponsor.icon.mask")
  @supports (-webkit-mask: var(--sponsor-icon) no-repeat center / 80%)
    .sponsor-icon
      background-color: var(--red-1)
      -webkit-mask: var(--sponsor-icon) no-repeat center / 80%

  @supports (mask: var(--sponsor-icon) no-repeat center / 80%)
    .sponsor-icon
      background-color: var(--red-1)
      mask: var(--sponsor-icon) no-repeat center / 80%

  @supports not ((mask: var(--sponsor-icon) no-repeat center / 80%) and (-webkit-mask: var(--sponsor-icon) no-repeat center / 80%))
    .sponsor-icon
      background: var(--sponsor-icon) no-repeat center / 80%

else
  .sponsor-icon
    background: var(--sponsor-icon) no-repeat center / 80%

.sponsor-button-wrapper
  margin: 8px 50px
  display: flex
  position: relative
  width: fit-content
  justify-content: center
  border: 10px var(--color-red-3-shadow) double
  transition: border .5s
  cursor: var(--cursor-pointer) !important

  &:hover
    border: 10px var(--color-h2-after) double

  &:hover + .sponsor-tip
    opacity: .8

  &.active
    border: 10px var(--color-h2-after) double

.sponsor-tip
  transition: opacity .2s
  color: var(--color-link)
  opacity: 0
  font-size: 14px
  font-weight: 700
  letter-spacing: 1px

  &.active
    opacity: .8

.sponsor-qr
  gap: 5px
  width: 100%
  flex-wrap: wrap
  justify-content: center
  display: none
  margin-top: 5px

  &.active
    display: flex

.sponsor-qr-image-wrapper
  display: flex
  flex-direction: column
  align-items: center

.sponsor-qr-name
  font-size: 14px
  opacity: 0.9
  color: var(--color-default)
  margin-top: 8px