button {
  font-family: arial
  text-transform: uppercase
  font-weight: bold
  font-size: .7rem
  letter-spacing: 1.4px

  color: #666
  background-color: #fff

  min-width: 6rem
  min-height: 1.8rem

  padding: .2rem 1rem
  cursor: pointer
  border: 1px #b9b9b9 solid
  outline: none

  display: flex
  justify-content: center
  align-items: center

  transition: border, color, background .1s ease-in

  :focus {
    outline: none
    /* border-color: #0088cc */
    /* box-shadow: 0 0 4px #0088cc */
  }

  :hover {
    color: #fff
    background-color: #15d6b4
    border: 1px solid #15d6b4
    outline: none
  }

  :disabled {
    color: grey
    background: #fff

    cursor: initial

    :hover {
      color: grey
      background: #fff
      border: 1px #b9b9b9 solid
    }
  }

  -subtle {
    color: #b9b9b9
    border: 1px solid rgba(0,0,0,0)
    background: none

    :hover {
      color: #fff
      background-color: rgba(200,0,0,.5)
      border: 1px solid rgba(200,0,0,.5)
    }
  }

  -primary {
    color: #fff
    background-color: #9754de
    border: 1px solid #9754de

    :hover { 
      background-color: #de54cc
      border: 1px solid #de54cc
    }
  }

  -active {
    color: #aa2cda
    border: 1px solid #aa2cda
  }

  -showMore {
    width: 100%

    padding: .2rem 0

    border-left: none
    border-right: none
    border-bottom: none
  }
}