/* Normal Buttons ---------------------- */

  .button { width: auto; background: $mainColor; border: 1px solid darken(($mainColor), 15%); @include box-shadow(0 1px 0 $shinyEdge inset); color: $white; cursor: pointer; display: inline-block; font-family: inherit; font-size: ms(0); font-weight: bold; line-height: 1; margin: 0; padding: $btnBase ($btnBase * 2) ($btnBase + 1); position: relative; text-align: center; text-decoration: none; @include single-transition(background-color, .15s, ease-in-out);

    /* Hovers */
    &:hover, &:focus { color: $white; background-color: darken(($mainColor), 10%); }
    &:active  { @include box-shadow(0 1px 0 $darkEdge inset); }

    /* Sizes */
    &.large     { font-size: ms(1); padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
    &.medium    { font-size: ms(0); }
    &.small     { font-size: ms(0) - 3; padding: ($smallBtnBase) ($smallBtnBase * 2) ($smallBtnBase + 1); }
    &.tiny      { font-size: ms(0) - 4; padding: ($tinyBtnBase) ($tinyBtnBase * 2) ($tinyBtnBase + 1); }
    &.expand    { width: 100%; text-align: center; }

    /* Colors */
    &.primary { background-color: $mainColor; border: 1px solid darken(($mainColor), 15%);
      &:hover, &:focus { background-color: darken(($mainColor), 10%); }
    }
    &.success { background-color: $successColor; border: 1px solid darken(($successColor), 15%);
      &:hover, &:focus { background-color: darken(($successColor), 10%); }
    }
    &.alert { background-color: $alertColor; border: 1px solid darken(($alertColor), 15%);
      &:hover, &:focus { background-color: darken(($alertColor), 10%); }
    }
    &.secondary { background-color: $secondaryColor; color: darken(($secondaryColor), 80%); border: 1px solid darken(($secondaryColor), 15%);
      &:hover, &:focus { background-color: darken(($secondaryColor), 10%); }
    }

    /* Radii */
    &.radius { @include border-radius($buttonRadius); }
    &.round { @include border-radius(1000px); }

    /* Layout */
    &.full-width { width: 100%; text-align: center; padding-#{$defaultFloat}: 0px !important; padding-#{$defaultOpposite}: 0px !important; }
    &.left-align { text-align: left; text-indent: 12px; }

		/* Disabled ---------- */
    &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none);
      &:hover { background: $mainColor; }

      &.success { background-color: $successColor;
        &:hover, &:focus { background-color: $successColor; outline: none; }
      }
      &.alert { background-color: $alertColor;
        &:hover, &:focus { background-color: $alertColor; outline: none; }
      }
      &.secondary { background-color: $secondaryColor;
        &:hover, &:focus { background-color: $secondaryColor; outline: none; }
      }
    }
	}

  /* Don't use native buttons on iOS */
	input[type=submit].button, button.button { -webkit-appearance: none; }

  /* Correct FF button padding */
  @-moz-document url-prefix() {
    button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding: 0;  }
    input[type="submit"].tiny.button		{ padding: ($tinyBtnBase - 2) ($tinyBtnBase * 2) ($tinyBtnBase - 1); }
    input[type="submit"].small.button		{ padding: ($smallBtnBase - 2) ($smallBtnBase * 2) ($smallBtnBase - 1); }
    input[type="submit"].button, input[type=submit].medium.button	{ padding: ($btnBase - 2) ($btnBase * 2) ($btnBase - 1) }
    input[type="submit"].large.button		{ padding: ($largeBtnBase - 2) ($largeBtnBase * 2) ($largeBtnBase - 1); }
  }

/* Buttons with Dropdowns ---------------------- */

  .button.dropdown { position: relative; padding-#{$defaultOpposite}: (($btnBase + 12) * 2);

    /* Sizes */
    &.large { padding-#{$defaultOpposite}: ($largeBtnBase * 2) * 2; }
    &.small { padding-#{$defaultOpposite}: ($smallBtnBase * 2) * 2; }
    &.tiny { padding-#{$defaultOpposite}: ($tinyBtnBase * 2) * 2; }

    /* Triangles */
    &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultOpposite}: $btnBase * 2; margin-top: -2px; }
    &.large:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; #{$defaultOpposite}: $largeBtnBase * 2; }
    &.small:after { @include cssTriangle(5px, #fff, top); margin-top: -2px; #{$defaultOpposite}: $smallBtnBase * 2; }
    &.tiny:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; #{$defaultOpposite}: $tinyBtnBase * 2; }
    &.secondary:after { border-color: #000 transparent transparent transparent; }

    /* Flyout List */
    &>ul { @include box-sizing(content-box); display: none; position: absolute; #{$defaultFloat}: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;

      li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
        a, button { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
        button { width: 100%; border: inherit; background: inherit; font-family: inherit; margin: inherit; -webkit-font-smoothing: $fontSmoothing; }
        &:hover, &:focus { background-color: lighten($mainColor, 45%); color: #222; }
        &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
      }
    }

    &.up>ul { border-top: 1px solid darken($white, 20%); border-bottom: none; }

    ul.no-hover.show-dropdown { display: block !important; }
    &:hover {
      &>ul.no-hover {
        display: none;
      }
    }

    /* Split Dropdown Buttons */
    &.split { padding: 0; position: relative;

      &:after { display: none; }
      &:hover, &:focus { background-color: $mainColor; }
      &.alert:hover, &.alert:focus { background-color: $alertColor; }
      &.success:hover, &.success:focus { background-color: $successColor; }
      &.secondary:hover, &.secondary:focus { background-color: $secondaryColor; }

      /* Sizes */
      &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); padding-#{$defaultFloat}: $btnBase * 2; padding-#{$defaultOpposite}: ($btnBase * 2.5) * 2; @include single-transition(background-color, .15s, ease-in-out);
        &:hover, &:focus { background-color: darken($mainColor, 10%); @include box-shadow(0 1px 0 $shinyEdge inset); }
      }
      &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); padding-#{$defaultFloat}: $largeBtnBase * 2; padding-#{$defaultOpposite}: ($largeBtnBase * 2.5) * 2; }
      &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); padding-#{$defaultFloat}: $smallBtnBase * 2; padding-#{$defaultOpposite}: ($smallBtnBase * 2.5) * 2; }
      &.tiny>a { padding: $tinyBtnBase (($tinyBtnBase * 2.5) * 2) ($tinyBtnBase + 1) ($tinyBtnBase * 2); padding-#{$defaultFloat}: $tinyBtnBase * 2; padding-#{$defaultOpposite}: ($tinyBtnBase * 2.5) * 2; }

      /* Triangle Spans */
      &>span { background-color: $mainColor; position: absolute; #{$defaultOpposite}: 0; top: 0; height: 100%; width: $btnBase * 3; border-#{$defaultFloat}: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
        &:hover, &:focus { background-color: darken($mainColor, 10%); }
        &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -6px; margin-top: -2px; }
      }
      &.secondary>span:after { @include cssTriangle(6px, darken(($secondaryColor), 80%), top); }

      &.large span { width: $largeBtnBase * 3; }
      &.small span { width: $smallBtnBase * 3; }
      &.tiny span { width: $tinyBtnBase * 3; }

      &.large span:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; margin-#{$defaultFloat}: -7px; }
      &.small span:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -4px; }
      &.tiny span:after { @include cssTriangle(3px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -3px; }

      /* Colors */
      &.alert>span { background-color: $alertColor; border-#{$defaultFloat}-color: darken($alertColor, 15%); }
      &.success>span { background-color: $successColor; border-#{$defaultFloat}-color: darken($successColor, 15%); }
      &.secondary>span { background-color: $secondaryColor; border-#{$defaultFloat}-color: darken($secondaryColor, 15%); }
      &.secondary>a { color: darken(($secondaryColor), 80%); }

      &.alert>a:hover, &.alert>span:hover, &.alert>a:focus, &.alert>span:focus { background-color: darken($alertColor, 10%); }
      &.success>a:hover, &.success>span:hover, &.success>a:focus, &.success>span:focus { background-color: darken($successColor, 10%); }
      &.secondary>a:hover, &.secondary>span:hover, &.secondary>a:focus, &.secondary>span:focus { background-color: darken($secondaryColor, 10%); }
    }
  }

  /* Button Groups ---------------------- */

  ul.button-group { list-style: none; padding: 0; margin: 0 0 12px; @include clearfix();

    li { padding: 0; margin: 0 0 0 -1px; float: $defaultFloat;
      &:first-child { margin-#{$defaultFloat}: 0; }
    }

    &.radius li {
      .button, .button.radius, .button-rounded { @include border-radius(0px); }
      &:first-child {
        .button, .button.radius { @include border-corner-radius(top, $defaultFloat, $buttonRadius); @include border-corner-radius(bottom, $defaultFloat, $buttonRadius); }
        .button.rounded { @include border-corner-radius(top, $defaultFloat, 1000px); @include border-corner-radius(bottom, $defaultFloat, 1000px); }
      }
      &:last-child {
        .button, .button.radius { @include border-corner-radius(top, $defaultOpposite, $buttonRadius); @include border-corner-radius(bottom, $defaultOpposite, $buttonRadius); }
        .button.rounded { @include border-corner-radius(top, $defaultOpposite, 1000px); @include border-corner-radius(bottom, $defaultOpposite, 1000px); }
      }
    }

    &.even {
      .button { width: 100%; }
      &.two-up li { width: 50%; }
      &.three-up li { width: 33.3%; }
      &.three-up li:first-child { width: 33.4%; }
      &.four-up li { width: 25%; }
      &.five-up li { width: 20%; }
    }
  }

  div.button-bar { overflow: hidden;
    ul.button-group { float: $defaultFloat; margin-#{$defaultOpposite}: 8px; }
    ul.button-group:last-child { margin-#{$defaultFloat}: 0; }
  }
