.button
  display: inline-block
  padding: 15px 25px
  background-color: $yellow
  border-radius: 4px
  text-decoration: none

  font-size: 0.8rem
  line-height: 1.2
  color: $black
  font-weight: semibold()

  transition: color 0.3s, background-color 0.3s, border 0.3s

  .arrow
    display: inline-block
    margin-left: 25px
    position: relative
    +sprite(-35px -1px, 15px, 10px)
    transform: translate3d(0,0,0)
    transition: transform 0.3s

  &:hover
    background-color: darken($yellow, 10%)

    .arrow
      transform: translate3d(5px, 0, 0)

  &__cancel
    padding: 14px 24px
    background-color: transparent
    border: 1px solid $yellow

    &:hover
      background-color: transparent
      border-color: $red

  &__delete
    background-color: $friendlyRed
    color: white

    &:hover
      background-color: darken($friendlyRed, 10%)