@define-mixin basic-button {
  @mixin rounded 200px;
  display: inline-block;
  font-weight: bold;
  font-size: 1.0em;
  @mixin sans-family;
  line-height: 12px;
  margin-right: 3px;
  padding: 7px 16px 6px;
  text-decoration: none;

  &.disabled {
    opacity: 0.5;
    cursor: default;
  }

}

@define-mixin default-button {
  @mixin basic-button;
  @mixin gradient lighten($primary-color, 15%), darken($primary-color, 12%);
  @mixin text-shadow #000;
  box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0px rgba(255,255,255, 0.2) inset;
  border: solid 1px #484e53;
  @mixin border-colors #616a71, #484e53, #363b3f;
  color: #efefef;

  &:not(.disabled) {
    &:hover{
      @mixin gradient lighten($primary-color, 18%), darken($primary-color, 9%);
    }

    &:active {
      box-shadow: 0 1px 3px rgba(0,0,0,0.40) inset, 0 1px 0 0px #FFF;
      @mixin gradient lighten($primary-color, 8%), darken($primary-color, 17%);
    }
  }
}

@define-mixin light-button {
  @mixin basic-button;
  @mixin gradient #FFFFFF, #E7E7E7;
  box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0 rgba(255,255,255, 0.8) inset;
  border: solid 1px #c7c7c7;
  @mixin border-colors #d3d3d3, #c7c7c7, #c2c2c2;
  @mixin text-shadow;
  color: $primary-color;

  &:not(.disabled) {
    &:hover {
      @mixin gradient #FFFFFF, #F1F1F1;
    }

    &:active {
      box-shadow: 0 1px 2px rgba(0,0,0,0.22) inset, 0 1px 0 0px #EEE;
      @mixin border-colors #c2c2c2, #b9b9b9, #b7b7b7;
      @mixin gradient #F3F3F3, #D8D8D8;
    }
  }

}

@define-mixin dark-button {
  @mixin default-button;
}