//
// @file
// Generate button css.
//
// These mixins will generate invisible classes and not normal classes. This
// allows for more semantic naming in your markup, but still allows for robotic
// naming for automatic generation.
//

// These are the default skins and sizes. They can be overridden with alternate
// values.
$buttons: (default, $color-border) (active, shade($color-border, 20)) (primary, $color-link) (primary-active, $color-link-visited) (alternate, $color-link-alternate) (alternate-active, $color-link-alternate-visited) !default;
$button-sizes: (default, ms(0), $rhythm-space ms(0)) (small, ms(0), $rhythm-space-short ms(0)) (large, ms(1), $rhythm-space ms(0)) !default;
$button-contrast: 80 !default;

// Bulk generate buttons styles with a list of settings.
@mixin buttons($buttons: $buttons) {
  /* Common styles for all buttons. */
  %button-common {
    -webkit-appearance: none;
    display: inline-block;
    @include box-sizing(border-box);
    margin: ms(-5);
    max-width: 100%;
    overflow: visible;
    line-height: 1em;
    vertical-align: baseline;
    border: none;
    @include border-radius;
    /* Reset all button fonts to a similar baseline in webkit. */
    font: -webkit-small-control;
    font-family: $font-sansserif;
    font-weight: $font-bold; /* revised to bold by TKO */
    /*letter-spacing: .06em; this doesn't look good, no need for it TKO */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: none;

    &:focus,
    &:hover {
      text-decoration: none;
    }

    &:active,
    &:focus {
      text-decoration: none;
      @include box-shadow(0 0 0 ms(-5) rgba($color-border, .4));
    }

    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top:-2px;
      margin-bottom: -2px;
    }
  }

  // Generate style for the size variants.
  @each $size in $button-sizes {
    @include button-size($size...);
  }

  // Generate the color styles for the buttons.
  @each $button in $buttons {
    @include button($button...);
  }
}

// Generate a size variant.
@mixin button-size($name, $font-size, $padding) {
  /* Dimensions for the #{$name} button type. */
  %button-#{$name}-layout {
    @extend %button-common;
    padding: $padding;
    font-size: $font-size;
  }
}

// Generate a set of buttons variants.
@mixin button($name, $base-color) {
  $text-color: contrast-color($base-color, darken($base-color, 70), lighten($base-color, 70), $button-contrast);
  $text-shadow: contrast-color($base-color, tint($base-color, 70), shade($base-color, 70), $button-contrast);
  $hover-base: tint($base-color, 20);
  $hover-text: contrast-color($hover-base, darken($hover-base, 70), lighten($hover-base, 70), $button-contrast);
  $hover-text-shadow: contrast-color($hover-base, tint($hover-base, 70), shade($hover-base, 70), $button-contrast);

  %button-#{$name} {
    background: $base-color;
    @include text-shadow(0 1px 0 $text-shadow);

    &,
    &:link,
    &:visited {
      color: $text-color;
    }

    &:hover {
      color: $hover-text;
      background: $hover-base;
      @include text-shadow(0 1px 0 $hover-text-shadow);
    }

    &:focus,
    &:active {
      background: $base-color;
    }

    &,
    &[type="submit"] {
      &[disabled] {
        color: desaturate(contrast-color($base-color, darken($base-color, 20), lighten($base-color, 20), $button-contrast), 80);
        background: desaturate($base-color, 80);
        cursor: default;
        cursor: not-allowed;
        @include text-shadow(none);
        @include transition(none);

        &:active,
        &:focus {
          @include box-shadow(none);
          color: desaturate(contrast-color($base-color, darken($base-color, 20), lighten($base-color, 20), $button-contrast), 80);
          background: desaturate($base-color, 80);
        }
      }
    }
  }
}
