ToggleButton {
  display: inline-block
  color: #757474
  padding: 8px 10px
  background: #2d2c2c
  border: 0
  border-radius: 3px
  font-size: 13px
  cursor: pointer
  transition: background-color 0.25s ease, color 0.25s ease

  -subscribe {
    color: #ccc

    :before {
      content: '★ '
    }
    :hover {
      background-color: #45b754;
      color: white;
    }
  }

  -unsubscribe {
    background-repeat: no-repeat
    background-position: right
    background-image: svg(subscribed)
    padding-right: 25px

    :hover {
      background-image: svg(subscribed-hover)
    }
  }

  -blocking {
    margin-left: 5px
    border: 0px
  }

  -unblocking {
    margin-left: 5px
    background-color: rgb(212, 112, 112)
    color: #ffffff
    border: 0px
  }

  -disabled {
    cursor: default
    opacity: 0.4 !important
    text-decoration: none !important
  }

  :hover {
    opacity: 1
    text-decoration: none
  }

  @svg subscribed {
    width: 20px
    height: 12px
    content: "<circle cx='6' stroke='#757474' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#757474'/>"
  }

  @svg subscribed-hover {
    width: 20px
    height: 12px
    content: "<circle cx='6' stroke='#aaa' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#aaa'/>"
  }
}