@import ../../vendor/lib

.AffiliateLinkButton
  transition: background-color $speed ease, color $speed ease
  vertical-align: middle
  overflow: hidden
  width: rem(40)
  height: rem(40)
  border-radius: rem(20)
  line-height: rem(40)
  text-align: center
  white-space: nowrap
  background-color: white
  color: rgba(white, 0)
  position: absolute
  z-index: 2
  top: rem(40)
  right: rem(30)

.AffiliateLinkButton > .SVGIcon.MoneyIcon > g
  fill: black
  stroke-width: 0.5
  stroke: transparent

.editable[contenteditable] + .AffiliateLinkButton
  display: none

.EmbedRegion .AffiliateLinkButton,
.RegionContent .AffiliateLinkButton
  top: rem(10)
  right: rem(10)

.EmbedRegion .embetter a
  line-height: rem(40)

@media(min-width: #{$break-2})
  .no-touch .AffiliateLinkButton:hover
    color: white
    background-color: #00d100
  .no-touch .AffiliateLinkButton:hover > .SVGIcon.MoneyIcon > g
    fill: white
    stroke: white


@import ../../vendor/lib

.AffiliateLinkButton
  transition: background-color $speed ease, color $speed ease
  vertical-align: middle
  overflow: hidden
  width: rem(40)
  height: rem(40)
  border-radius: rem(20)
  line-height: rem(39)
  text-align: center
  white-space: nowrap
  background-color: white
  color: rgba(white, 0)
  position: absolute
  z-index: 2
  top: rem(40)
  right: rem(30)

.AffiliateLinkButton > .SVGIcon.MoneyIcon > g
  fill: black
  stroke-width: 0.5
  stroke: transparent

.editable[contenteditable] + .AffiliateLinkButton
  display: none

.EmbedRegion .AffiliateLinkButton,
.RegionContent .AffiliateLinkButton
  top: rem(10)
  right: rem(10)

.EmbedRegion .embetter a
  line-height: rem(40)

@media(min-width: #{$break-2})
  .no-touch .AffiliateLinkButton:hover
    color: white
    background-color: #00d100
  .no-touch .AffiliateLinkButton:hover > .SVGIcon.MoneyIcon > g
    fill: white
    stroke: white


Move dollar sign up 1px in affiliate link button.
Move dollar sign up 1px in affiliate link button.

[Finishes #126636845](https://www.pivotaltracker.com/story/show/126636845)
