Button {
  font-family: arial
  $backgroundPrimaryText

  min-width: 5rem
  height: 1.4rem
  padding: .2rem 1rem

  border: 1px #b9b9b9 solid
  border-radius: 10rem

  cursor: pointer

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

  :hover { 
    opacity: .7
  }
  transition: all .1s ease-in

  -subtle {
    color: #555
    :hover {
      color: #222
    }
  }

  -primary {
    $font
    $colorFontPrimary
    $borderPrimary
  }

  -strong {
    $colorPrimary
    $font
    $borderPrimary
  }

  -channel {
    $backgroundPrimary
    $colorFontPrimary
    font-size: .9rem
    padding: .1rem .7rem
    min-width: initial
  }

  -channelActive {
    $colorPrimary
    $borderPrimary
    font-size: .9rem
    min-width: initial
  }

  -showMore {
    width: 100%

    padding: .2rem 0

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