/** BUTTONS **/

.btn
  font-size: 15px
  font-weight: 400
  width: 150px
  height: 50px
  cursor: pointer
  text-decoration: none
  text-align: center
  display: flex
  align-items: center
  justify-content: center
  line-height: $mainFontSize*1
  transition: background ease 0.5s
  outline: none


/** Opslaan knop **/
.btn-holder
  input
    padding-right: 15px
    background: none
    border: 0
    width: 100%
    height: 100%
    cursor: pointer
    font-family: $mainFontFamily
    font-size: 15px
    color: #8a9299
    &:hover
      background: #fff
  &:after
    position: relative
    content: url('/images/icons/save.svg')
    width: 12px
    height: 12px
    right: 35px
    margin-top: -3px

.btn-save
  border: 2px solid #8a9299
  background: transparent
  color: #8a9299
  &:hover
    background: rgba(#8a9299, 0.15)

/** Indienen knop **/
.btn-send
  border: 0
  background: $green
  color: #fff
  &:hover
    background: lighten($green, 10%)

/** Archief knop **/
.btn-archive
  &:before
    content: url('/images/icons/archive.svg')
    width: 20px
    height: 20px
    padding-right: 7.5px
  border: 0
  background: $orange
  color: #fff
  &:hover
    background: lighten($orange, 10%)

/** Afmelden knop **/
.btn-logout
  &:before
    content: url('/images/icons/logout.svg')
    width: 20px
    height: 20px
    padding-right: 7.5px
  border: 0
  background: #6d9cb0
  color: #fff
  &:hover
    background: lighten(#6d9cb0, 10%)

/** Bestanden toevoegen knop **/
.btn-add
  border: 0
  background: $orange
  color: white
  height: 50px
  width: 320px
  display: inline-block
  vertical-align: middle
  &:hover
    background: lighten($orange, 10%)
  &:after
    vertical-align: middle
    position: relative
    display: inline-block
    content: url('/images/icons/add.svg')
    width: 20px
    height: 20px
    padding-left: 7.5px

/** Verwijderen knop **/
.btn-remove
  border: 0
  background: $red
  color: #fff
  &:hover
    background: lighten($red, 10%)

/** Download ALLE bestanden knop **/
.btn-download-all
  border: 2px solid #8a9299
  background: transparent
  color: #8a9299
  width: 200px
  &:hover
    background: #fff

  &:after
    content: url('/images/icons/download.svg')
    width: 12.5px
    height: 12.5px
    padding-left: 7.5px

.btn-reviewed-in-practice
  margin-top: 5px
  border: 2px solid #8a9299
  background: transparent
  color: #8a9299
  width: 200px
  -webkit-appearance: none
  &:hover
    background: #fff

.btn-download-group-files
  border: 2px solid #8a9299
  background: transparent
  color: #8a9299
  width: 200px
  &:hover
    background: #fff

.btn-back
  &:before
    content: url('/images/icons/back.svg')
    width: 15px
    padding-right: 7.5px
  border: 0
  background: #6d9cb0
  color: #fff
  &:hover
    background: lighten(#6d9cb0, 10%)

.btn-back-alt
  &:before
    content: url('/images/icons/back.svg')
    width: 15px
    padding-right: 7.5px
  border: 0
  background: #6d9cb0
  color: #fff
  &:hover
    background: lighten(#6d9cb0, 10%)

.btn-cancel
  border: 0
  background: $orange
  color: #fff
  &:hover
    background: lighten($orange, 10%)

.btn-collapse
  border: 0
  background: #e7ebee
  color: #8a9299
  width: 200px
  &:hover
    background: transparent
    border: 2px solid #e7ebee