.button
  display: inline-block
  position: relative
  padding: 0 60px 0 20px
  height: 60px

  border-radius: 8px
  color: #fff

  +RalewayExtraBold
  font-size: 14px
  line-height: 1.2
  letter-spacing: 0.15em
  text-transform: uppercase

  +valign-parent
  +transition(all 300ms ease-out)

  +respond-to-width(1680)
    padding: 0 50px 0 15px
    height: 50px
    font-size: 13px

  +respond-to-width(1024)
    padding: 0 40px 0 10px
    height: 40px
    font-size: 12px
    letter-spacing: 0.07em

  &::after
    content: ''
    +position(absolute, 50% 26px null null)
    margin-top: -6px
    +sprite(-420px,-50px,12px,10px)

    +respond-to-width(1024)
      right: 20px

  &.purple
    +background-image(linear-gradient(0deg, #52405B 50%, #63526D 50%))

    .no-cssgradients &
      background: #52405B

  &.gums
    +background-image(linear-gradient(0deg, #E7785D 50%, #FF8767 50%))

    .no-cssgradients &
      background: #E7785D

  &.white
    +background-image(linear-gradient(0deg, #FFFFFF 50%, #ECECEC 50%))
    color: $gums

    .no-cssgradients &
      background: #FFFFFF

    &::after
      +sprite(-440px,-50px,12px,10px)

  &:hover
    color: #fff

    &.purple
      +background-image(linear-gradient(0deg, #E7785D 50%, #FF8767 50%))

    &.gums
      +background-image(linear-gradient(0deg, #52405B 50%, #63526D 50%))

    &.white
      +background-image(linear-gradient(0deg, #52405B 50%, #63526D 50%))
      &::after
        +sprite(-420px,-50px,12px,10px)



  .label
    +valign-child

input[type="submit"].button
  padding: 0 20px

  +respond-to-width(1680)
    padding: 0 15px

  +respond-to-width(1024)
    padding: 0 10px