.rp-button
  border: 0
  border-radius: 2px
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out
  position: relative
  box-sizing: border-box
  transform: translateZ(0)

  &::after
    content: ""
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    background-color: rgba(0,0,0,0.1)
    border-radius: 2px
    transform: translateZ(0)
    opacity: 0
    transition: opacity 0.15s ease-in-out

  &:hover
    transform: translateZ(0) translateY(-1px)
    box-shadow: 0 1px 2px rgba(0,0,0,0.3)
    &::after
      opacity: 0.7

  &:active
    transform: translateZ(0) translateY(0px)
    box-shadow: none
    &::after
      opacity: 1

  &.primary
    background-color: var(--c-green)
    color: var(--c-dark)

  &.secondary
    background-color: var(--c-3)
    color: var(--c-7)

  &.c5
    background-color: var(--c-5)
    color: var(--c-9)

  &.discord
    background-color: var(--c-discord)
    color: var(--c-white)

  &.discord-alt
    background-color: transparent
    color: var(--c-white)
    border: 1px solid var(--c-discord)
    &::after
      background-color: hsla(0,0%,100%,0.05)
      transition: opacity 0.3s ease-in-out

  &-logo
    height: 1.6rem

.rp-discord
  border: 1px solid var(--c-discord-dark)
  box-shadow: 0 0 1px rgba(0,0,0,0.3)

svg.smol-bump
  position: relative
  top: -0.125rem