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

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

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

  &:active
    transform: translateY(0px)
    box-shadow: none
    &::after
      opacity: 1
  
  &.primary
    background-color: var(--c-5)
    color: var(--c-9)
  
  &.secondary
    background-color: var(--c-3)
    color: var(--c-7)

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

  &-logo
    height: 1.6rem

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