/** buttons **/

.btn
  font-family: 'Roboto' !important
  font-weight: bold !important
  display: inline-block
  color: #FFF !important
  background-image: none !important
  border: 5px solid
  border-radius: 0
  box-shadow: none !important
  -webkit-transition: all ease .15s
  -moz-transition: all ease .15s
  -o-transition: all ease .15s
  transition: all ease .15s
  cursor: pointer
  vertical-align: middle
  margin: 0
  position: relative
  padding: 0 12px 1px
  line-height: 32px
  font-size: 14px

.btn-large
  padding: 0 14px 1px
  line-height: 38px
  border-width: 6px
  font-size: 16px

.btn-small
  padding: 0 5.5px
  line-height: 24px
  border-width: 4px
  font-size: 15px
  /*margin: 2.5px;

.btn-mini
  padding: 0 5px
  line-height: 22px
  border-width: 2px
  font-size: 12px

.btn-minier
  padding: 0 4px
  line-height: 18px
  border-width: 1px
  font-size: 11px

button.btn:active
  top: 1px
  left: 1px

.btn, .btn-default
  @include default-button-colors

.btn.active, .btn-default.active
  background-color: #9baab3 !important
  border-color: #8a9ba6

.btn.no-border.active, .btn-default.no-border.active
  background-color: #92a3ac !important
  border-color: #92a3ac

.btn.disabled, .btn-default.disabled, .btn[disabled], .btn-default[disabled]
  background-color: #abbac3 !important

.btn-header
  width: 100px

.i_use_this_btn
  @include secondary-button-colors
  width: 100%

.btn-info
  @include info-button-colors
  &.no-hover:hover
    background-color: #0082C6 !important
  &.active, &.no-border.active
    background-color: #66B7E8 !important
    border-color: #66B7E8
  &.disabled, &[disabled]
    background-color: #66CEF6 !important

.btn-primary
  @include primary-button-colors
  &.no-hover:hover
    background-color: #005481 !important
  &.active, &.no-border.active
    background-color: #0082C6 !important
    border-color: #005481

.btn-refresh
  @include secondary-button-colors
  &.no-hover:hover
    background-color: #0082C6 !important
  &.active, &.no-border.active
    background-color: #66B7E8 !important
    border-color: #66B7E8
  &.disabled, &[disabled]
    background-color: #66CEF6 !important

.btn-success
  @include join-now-button-colors
  &.no-border:hover
    border-color: #659965
  &.no-hover:hover
    background-color: #437417 !important
  &.active, &.no-border.active
    background-color: #79B247 !important
    border-color: #79B247
  &.disabled, &[disabled]
    background-color: #79B247 !important
  background-color: #FFB819 !important
  &:hover
    background-color: #E07C05 !important
    border-color: #E07C05 !important
.btn-warning
  @include warning-button-colors
  &.no-hover:hover
    background-color: #9F4F0A !important
  &.active, &.no-border.active
    background-color: #F58220 !important
    border-color: #F58220

.btn-danger
  @include danger-button-colors
  &.no-hover:hover
    background-color: #9F2609 !important
  &.active, &.no-border.active
    background-color: #F5471D !important
    border-color: #F5471D
  &.disabled, &[disabled]
    background-color: #F5471D !important

.btn-inverse
  background-color: #575757 !important
  border-color: #575757
  &:hover
    background-color: #303030 !important
  &.no-border:hover
    border-color: #303030
  &.no-hover:hover
    background-color: #555555 !important
  &.active
    background-color: #434343 !important
    border-color: #333333
  &.no-border.active
    background-color: #3b3b3b !important
    border-color: #3b3b3b
  &.disabled, &[disabled]
    background-color: #555555 !important

.btn-pink
  background-color: #7E7392 !important
  border-color: #7E7392
  &:hover
    background-color: #53456D !important
  &.no-border:hover
    border-color: #b73766
  &.no-hover:hover
    background-color: #d6487e !important
  &.active
    background-color: #c74072 !important
    border-color: #b33564
  &.no-border.active
    background-color: #be386a !important
    border-color: #be386a
  &.disabled, &[disabled]
    background-color: #d6487e !important

.btn-purple
  background-color: #45867A !important
  border-color: #45867A
  &:hover
    background-color: #166859 !important
  &.no-border:hover
    border-color: #281649
  &.no-hover:hover
    background-color: #281649 !important
  &.active, &.no-border.active
    background-color: #7865A4 !important
    border-color: #7865A4
  &.disabled, &[disabled]
    background-color: #7865A4 !important

.btn-grey
  background-color: #797979 !important
  border-color: #797979
  &:hover
    background-color: #575757 !important
  &.no-border:hover
    border-color: #575757
  &.no-hover:hover
    background-color: #575757 !important
  &.active, &.no-border.active
    background-color: #797979 !important
    border-color: #797979
  &.disabled, &[disabled]
    background-color: #9A9A9A !important

.btn-yellow
  background-color: #B3D084 !important
  border-color: #B3D084
  color: #996633 !important
  &:hover
    background-color: #A0C465 !important
  &.no-border:hover
    border-color: #A0C465
  &.no-hover:hover
    background-color: #A0C465 !important
  &.active, &.no-border.active
    background-color: #B3D084 !important
    border-color: #B3D084
  &.disabled, &[disabled]
    background-color: #B3D084 !important

.btn-light
  background-color: #DDD !important
  border-color: #DDD
  color: #888888 !important
  &:hover
    background-color: #BCBCBC !important
  &.no-border:hover
    border-color: #BCBCBC
  &.no-hover:hover
    background-color: #BCBCBC !important
  &.active, &.no-border.active
    background-color: #DDD !important
    border-color: #DDD
  &.disabled, &[disabled]
    background-color: #DDD !important
  &.btn-mini:after
    left: -2px
    right: -2px
    top: -2px
    bottom: -2px
  &.btn-small:after
    left: -4px
    right: -4px
    top: -4px
    bottom: -4px
  &.btn-large:after
    left: -6px
    right: -6px
    top: -6px
    bottom: -6px

.btn
  &.disabled.active, &[disabled].active, &.disabled:focus, &[disabled]:focus, &.disabled:active, &[disabled]:active
    outline: none
  &.disabled:active, &[disabled]:active
    top: 0
    left: 0
  &.active
    color: #efe5b5
    &:after
      display: inline-block
      content: ""
      position: absolute
      border-bottom: 1px solid #efe5b5
      left: -4px
      right: -4px
      bottom: -4px
    &.btn-small:after
      left: -3px
      right: -3px
      bottom: -3px
      border-bottom-width: 1px
    &.btn-large:after
      left: -5px
      right: -5px
      bottom: -5px
      border-bottom-width: 1px
    &.btn-mini:after, &.btn-minier:after
      left: -1px
      right: -1px
      bottom: -1px
      border-bottom-width: 1px
    &.btn-yellow:after
      border-bottom-color: #c96338
    &.btn-light
      color: #515151
      &:after
        border-bottom-color: #B5B5B5
