@mixin btn-primary
  @include ie7-inline-block()
  padding: 3px 12px 2px
  margin-bottom: 0
  font-size: $baseFontSize
  line-height: $baseLineHeight
  vertical-align: middle
  cursor: pointer
  background-color: $principal-btnColorbackground
  border: 1px solid $principal-btnColorborder
  *border: 0
  color: $gray
  background-image: none
  @include ie7-restore-left-whitespace()
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05))
  @include transition(background 1s, color, 1s)
  @include border-radius(7px)
  a
    color: $gray
  
  &:hover
    border: 1px solid $principal-btnColorbackground
    background-color: $principalColor !important
    color: $auxiliarColor
    .caret
      @include transition (border 1s, color, 1s)
      border-top-color: $principal-btnColorbackground
      border-bottom-color: $principal-btnColorbackground
  .caret
    border-top-color: $principal-btnColorborder
    border-bottom-color: $principal-btnColorborder
    &:hover
      border-top-color: $principal-btnColorbackground
      border-bottom-color: $principal-btnColorbackground
  
  &:focus 
    @include tab-focus()
  
  &.active
    border: 1px solid $auxiliarColor
    background-color: $principalColor !important
    color: $auxiliarColor

  &.disabled,
  &[disabled] 
    cursor: default
    @include opacity(85)
    background-color: $principalColor
    color: $auxiliarColor



@mixin btn-secundary
  @include ie7-inline-block()
  padding: 4px 12px
  margin-bottom: 0
  font-size: $baseFontSize
  line-height: $baseLineHeight
  vertical-align: middle
  cursor: pointer
  background-color: $secundary-btnColorbackground
  border: 1px solid $secundary-btnColorborder 
  *border: 0
  color: $auxiliarColor
  background-image: none
  @include ie7-restore-left-whitespace()
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05))
  @include transition(background 1s, color, 1s)
  @include border-radius(7px)
  a
    color: $gray
  
  &:hover
    border: 1px solid $secundary-btnColorbackground
    background-color: $secundary-btnColorborder !important
    color: $principalColor
  
  &:focus 
    @include tab-focus()
  
  &.active
    border: 1px solid $secundary-btnColorborder
    background-color: $secundary-btnColorbackground !important
    color: $principalColor

  &.disabled,
  &[disabled] 
    cursor: default
    @include opacity(85)
    background-color: $secundary-btnColorbackground
    color: $gray



@mixin see-more
  clear: both
  margin-top: 10px
  a
    float: left
    position: absolute
    background-color: #eee
    margin-bottom: 5px
    display: inline-block
    border: 1px solid
    border-right: #edeaf2
    border-bottom: #e3e0e8
    border-color: $auxiliarColor
    @include border-radius (5px)
    color: $black
    text-align: center
    padding: 0px 10px 0px 4px

  &:hover
    background-color: $gray
    color: $auxiliarColor
    text-decoration: none

  &:focus 
    @include tab-focus()
  
  &.disabled,
  &[disabled] 
    cursor: default
    @include opacity(65)

  .loading
    z-index: 200
    position: relative

@mixin btn-add
  font-size: 10px
  .btn-group
    button
      @include btn-primary
      &:hover
        .caret
          @include transition (border 1s, color, 1s)
          border-top-color: $auxiliarColor
          border-bottom-color: $auxiliarColor
      .caret
        border-top-color: $principal-btnColorborder
        border-bottom-color: $principal-btnColorborder
        margin-top: 8px
        margin-left: 2px
        &:hover
          border-top-color: $auxiliarColor
          border-bottom-color: $auxiliarColor

  .open
    .btn
      .caret
        border-top-color: $principal-btnColorborder
        border-bottom-color: $principal-btnColorborder