// Name:            Buttons
//
// Component:       `btn`
//
// Modifiers:       `btn-block`
//                  `btn-lg`
//                  `btn-sm`
//                  `btn-xs`
//                  `btn-squared`
//                  `btn-round`
//                  `btn-default`
//                  `btn-primary`
//                  `btn-success`
//                  `btn-info`
//                  `btn-warning`
//                  `btn-danger`
//                  `btn-dark`
//                  `btn-flat`
//                  `btn-icon`
//                  `btn-raised`
//                  `btn-floating`
//                  `btn-animate`
//                  `btn-tagged`
//                  `btn-pill-left`
//                  `btn-pill-right`
//                  `btn-direction`
//                  `btn-pure`
//
// Markup:
//
// <!-- button -->
// <button type="button" class="btn">...</button>
//
// ========================================================================

// Variables
// ========================================================================

$btn-shadow:                             $box-shadow-1;

$btn-tagged-padding-horizontal:         pxToRem(8px) !default;
$btn-tagged-xs-padding-horizontal:      pxToRem(4px) !default;
$btn-tagged-sm-padding-horizontal:      pxToRem(6px) !default;
$btn-tagged-lg-padding-horizontal:      pxToRem(14px) !default;
$btn-tagged-tag-bgColor:                rgba(0, 0, 0, 0.15) !default;

$btn-color:                              $inverse !default;
$btn-bg:                                 transparent !default;
$btn-border:                             $border-color-base !default;

$btn-default-disabled-color:             $btn-default-color !default;
$btn-default-disabled-bg:                $gray-lightest !default;
$btn-default-disabled-border:            $btn-default-disabled-bg !default;

$btn-primary-disabled-color:             $color-white !default;
$btn-primary-disabled-bg:                $color-primary-400 !default;
$btn-primary-disabled-border:            $btn-primary-disabled-bg !default;

$btn-success-disabled-color:             $color-white !default;
$btn-success-disabled-bg:                $color-green-400 !default;
$btn-success-disabled-border:            $btn-success-disabled-bg !default;

$btn-info-disabled-color:                $color-white !default;
$btn-info-disabled-bg:                   $color-cyan-400 !default;
$btn-info-disabled-border:               $btn-info-disabled-bg !default;

$btn-warning-disabled-color:             $color-white !default;
$btn-warning-disabled-bg:                $color-orange-400 !default;
$btn-warning-disabled-border:            $btn-warning-disabled-bg !default;

$btn-danger-disabled-color:              $color-white !default;
$btn-danger-disabled-bg:                 $color-red-400 !default;
$btn-danger-disabled-border:             $btn-danger-disabled-bg !default;

$btn-dark-disabled-color:                $color-white !default;
$btn-dark-disabled-bg:                   $gray !default;
$btn-dark-disabled-border:               $btn-dark-disabled-bg !default;

$btn-with-icon-margin:                   -1px 3px 0 !default;

$btn-raised-shadow-top:                  $shadow-2-top !default;
$btn-raised-shadow-bottom:               $shadow-2-bottom !default;
$btn-raised-shadow-active-top:           $shadow-3-top !default;
$btn-raised-shadow-active-bottom:        $shadow-3-bottom !default;

$btn-flat-disabled-color:                $gray !default;

$btn-icon-xs-font-size:                  $font-size-sm !default;
$btn-icon-sm-font-size:                  $font-size-base !default;
$btn-icon-lg-font-size:                  pxToRem(20px) !default;

$btn-floating-size:                      pxToRem(56px) !default;
$btn-floating-padding:                   pxToRem(14px) !default;
$btn-floating-font-size:                 pxToRem(36px) !default;

$btn-floating-shadow:                    $shadow-5-bottom !default;

$btn-floating-xs-size:                   pxToRem(30px) !default;
/*$btn-floating-xs-padding:                10px !default;*/
$btn-floating-xs-font-size:              pxToRem(18px) !default;

$btn-floating-sm-size:                   pxToRem(40px) !default;
/*$btn-floating-sm-padding:                13px !default;*/
$btn-floating-sm-font-size:              pxToRem(26px) !default;

$btn-floating-lg-size:                   pxToRem(70px) !default;
/*$btn-floating-lg-padding:                15px !default;*/
$btn-floating-lg-font-size:              pxToRem(46px) !default;

$btn-animate-side-padding:               pxToRem(8px) pxToRem(28px) !default;
$btn-animate-side-xs-padding:            pxToRem(3px) pxToRem(14px) !default;
$btn-animate-side-sm-padding:            pxToRem(6px) pxToRem(22px) !default;
$btn-animate-side-lg-padding:            pxToRem(10px) pxToRem(33px) !default;
$btn-animate-vertical-icon-font-size:    pxToRem(24px) !default;
$btn-animate-vertical-xs-icon-font-size: pxToRem(18px) !default;
$btn-animate-vertical-sm-icon-font-size: pxToRem(21px) !default;
$btn-animate-vertical-lg-icon-font-size: pxToRem(37px) !default;


$btn-inverse-color:                      $text-color !default;
$btn-inverse-bg:                         $inverse !default;
$btn-inverse-border:                     $btn-default-border !default;
$btn-inverse-hover-bg:                   $inverse !default;
$btn-inverse-hover-border:               $btn-default-hover-border !default;
$btn-inverse-active-bg:                  $inverse !default;
$btn-inverse-active-border:              $btn-default-active-border !default;
$btn-inverse-disabled-color:             $gray-light !default;
$btn-inverse-disabled-bg:                $inverse !default;
$btn-inverse-disabled-border:            $btn-dark-disabled-bg !default;


$btn-pure-default-color:                 $gray !default;
$btn-pure-default-hover-color:           $gray-light !default;

$btn-pure-primary-color:                 $brand-primary !default;
$btn-pure-primary-hover-color:           $brand-primary-400 !default;

$btn-pure-success-color:                 $brand-success !default;
$btn-pure-success-hover-color:           $brand-success-400 !default;

$btn-pure-info-color:                    $brand-info !default;
$btn-pure-info-hover-color:              $brand-info-400 !default;

$btn-pure-warning-color:                 $brand-warning !default;
$btn-pure-warning-hover-color:           $brand-warning-400 !default;

$btn-pure-danger-color:                  $brand-danger !default;
$btn-pure-danger-hover-color:            $brand-danger-400 !default;

$btn-pure-dark-color:                    $brand-dark !default;
$btn-pure-dark-hover-color:              $brand-dark-hover !default;

$btn-pure-inverse-color:                 $inverse !default;
$btn-pure-inverse-hover-color:           $btn-inverse-hover-bg !default;


$btn-styles: (
  'default': (
    'color': $btn-default-color,
    'bg': $btn-default-bg,
    'border': $btn-default-border,
    'hover-bg': $btn-default-hover-bg,
    'hover-border': $btn-default-hover-border,
    'active-bg': $btn-default-active-bg,
    'active-border': $btn-default-active-border,
    'disabled-color': $btn-default-disabled-color,
    'disabled-bg': $btn-default-disabled-bg,
    'disabled-border': $btn-default-disabled-border
  ),
  'primary': (
    'color': $btn-primary-color,
    'bg': $btn-primary-bg,
    'border': $btn-primary-border,
    'hover-bg': $btn-primary-hover-bg,
    'hover-border': $btn-primary-hover-border,
    'active-bg': $btn-primary-active-bg,
    'active-border': $btn-primary-active-border,
    'disabled-color': $btn-primary-disabled-color,
    'disabled-bg': $btn-primary-disabled-bg,
    'disabled-border': $btn-primary-disabled-border
  ),
  'success': (
    'color': $btn-success-color,
    'bg': $btn-success-bg,
    'border': $btn-success-border,
    'hover-bg': $btn-success-hover-bg,
    'hover-border': $btn-success-hover-border,
    'active-bg': $btn-success-active-bg,
    'active-border': $btn-success-active-border,
    'disabled-color': $btn-success-disabled-color,
    'disabled-bg': $btn-success-disabled-bg,
    'disabled-border': $btn-success-disabled-border
  ),
  'info': (
    'color': $btn-info-color,
    'bg': $btn-info-bg,
    'border': $btn-info-border,
    'hover-bg': $btn-info-hover-bg,
    'hover-border': $btn-info-hover-border,
    'active-bg': $btn-info-active-bg,
    'active-border': $btn-info-active-border,
    'disabled-color': $btn-info-disabled-color,
    'disabled-bg': $btn-info-disabled-bg,
    'disabled-border': $btn-info-disabled-border
  ),
  'warning': (
    'color': $btn-warning-color,
    'bg': $btn-warning-bg,
    'border': $btn-warning-border,
    'hover-bg': $btn-warning-hover-bg,
    'hover-border': $btn-warning-hover-border,
    'active-bg': $btn-warning-active-bg,
    'active-border': $btn-warning-active-border,
    'disabled-color': $btn-warning-disabled-color,
    'disabled-bg': $btn-warning-disabled-bg,
    'disabled-border': $btn-warning-disabled-border
  ),
  'danger': (
    'color': $btn-danger-color,
    'bg': $btn-danger-bg,
    'border': $btn-danger-border,
    'hover-bg': $btn-danger-hover-bg,
    'hover-border': $btn-danger-hover-border,
    'active-bg': $btn-danger-active-bg,
    'active-border': $btn-danger-active-border,
    'disabled-color': $btn-danger-disabled-color,
    'disabled-bg': $btn-danger-disabled-bg,
    'disabled-border': $btn-danger-disabled-border
  ),
  'inverse': (
    'color': $btn-inverse-color,
    'bg': $btn-inverse-bg,
    'border': $btn-inverse-border,
    'hover-bg': $btn-inverse-hover-bg,
    'hover-border': $btn-inverse-hover-border,
    'active-bg': $btn-inverse-active-bg,
    'active-border': $btn-inverse-active-border,
    'disabled-color': $btn-inverse-disabled-color,
    'disabled-bg': $btn-inverse-disabled-bg,
    'disabled-border': $btn-inverse-disabled-border
  ),
  'dark': (
    'color': $btn-dark-color,
    'bg': $btn-dark-bg,
    'border': $btn-dark-border,
    'hover-bg': $btn-dark-hover-bg,
    'hover-border': $btn-dark-hover-border,
    'active-bg': $btn-dark-active-bg,
    'active-border': $btn-dark-active-border,
    'disabled-color': $btn-dark-disabled-color,
    'disabled-bg': $btn-dark-disabled-bg,
    'disabled-border': $btn-dark-disabled-border
  )
);

// Component: Button
// ========================================================================

.btn {
  // @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius);
  -webkit-font-smoothing: subpixel-antialiased;
  box-shadow: $btn-shadow;
  transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;

  &,
  &:active,
  &.active {
    &:focus {
      outline: 0;
    }
  }

  &:active,
  &.active {
    box-shadow: none;
  }

  // Button with icon
  .icon {
    @include icon-fixed-width();
    line-height: inherit;
    margin: $btn-with-icon-margin;
  }
}

// Modifier: `btn-link`
// -------------------------

.btn-link {
  box-shadow: none;
}

// Modifier: `btn-block`
// -------------------------

.btn-block {
  white-space: normal;
}

// Size Modifier
// ========================================================================

// .btn-lg {
//   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-lg, $line-height-lg, $border-radius-large);
// }

// .btn-sm {
//   @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-sm, $line-height-sm, $border-radius-small);
// }

.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-sm, $border-radius-small);
}

// Border Radius Modifier
// ========================================================================

// Modifier: `btn-squared`
// -------------------------

.btn-squared {
  border-radius: 0;
}

// Modifier: `btn-round`
// -------------------------

.btn-round {
  border-radius: 1000px;
}

// Color Modifier
// ========================================================================

// Modifier: `btn-primary`
// -------------------------

.btn-primary {
  @include button-styles-variant('primary');
}

// Modifier: `btn-success`
// -------------------------

.btn-success {
  @include button-styles-variant('success');
}

// Modifier: `btn-info`
// -------------------------

.btn-info {
  @include button-styles-variant('info');
}

// Modifier: `btn-warning`
// -------------------------

.btn-warning {
  @include button-styles-variant('warning');
}

// Modifier: `btn-danger`
// -------------------------

.btn-danger {
  @include button-styles-variant('danger');
}

// Modifier: `btn-default`
// -------------------------

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
  @include button-styles-variant('default');
}

// Modifier: `btn-inverse`
// -------------------------

.btn-inverse {
  @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border);
  @include button-styles-variant('inverse');
}

// Modifier: `btn-dark`
// -------------------------

.btn-dark {
  @include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
  @include button-styles-variant('dark');

  &.btn-flat {
    color: $btn-dark-bg;
  }
}

// Modifier: `btn-flat`
// ========================================================================

.btn-flat {
  background: none;
  border: none;
  box-shadow: none;
  &:hover,
  &:focus {
    box-shadow: none;
  }
  &.disabled {
    color: $btn-flat-disabled-color;
  }
}


// Modifier: `btn-icon`
// ========================================================================

.btn-icon, .btn.icon {
  padding: pxToRem(10px);
  font-size: $font-size-icon;
  line-height: 1em;

  &.btn-xs {
    padding: pxToRem(4px);
    font-size: $btn-icon-xs-font-size;
  }
  &.btn-sm {
    padding: pxToRem(8px);
    font-size: $btn-icon-sm-font-size;
  }
  &.btn-lg {
    padding: pxToRem(12px);
    font-size: $btn-icon-lg-font-size;
  }
  &.disabled {
    color: $btn-flat-disabled-color;
  }
}

.btn-icon {
  .icon {
    margin: -1px 0 0;
  }
}

// Modifier: `btn-raised`
// ========================================================================

.btn-raised {
  @include btn-raised-shadow();

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    box-shadow: none;
  }
}

// Modifier: `btn-floating`
// ========================================================================

.btn-floating {
  width: $btn-floating-size;
  height: $btn-floating-size;
  padding: 0;
  margin: 0;
  font-size: $btn-floating-font-size;
  text-align: center;
  border-radius: 100%;

  box-shadow: $btn-floating-shadow;
  &.btn-xs {
    width: $btn-floating-xs-size;
    height: $btn-floating-xs-size;
    padding: 0;
    font-size: $btn-floating-xs-font-size;
  }
  &.btn-sm {
    width: $btn-floating-sm-size;
    height: $btn-floating-sm-size;
    padding: 0;
    font-size: $btn-floating-sm-font-size;
  }
  &.btn-lg {
    width: $btn-floating-lg-size;
    height: $btn-floating-lg-size;
    padding: 0;
    font-size: $btn-floating-lg-font-size;
  }
  i {
    position: relative;
    top: 0;
  }
}


// Modifier: `btn-animate`
// ========================================================================

.btn-animate {
  position: relative;
  overflow: hidden;

  span {
    display: block;
    width: 100%;
    height: 100%;

    @include translate(0px, 0px);
  }

  &-side {
    padding: $btn-animate-side-padding;

    span {
      transition: transform 0.2s ease-out 0s;

      > .icon {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        opacity: 0;
        @include translate(-20px, -50%);
        transition: opacity .2s ease-out 0s;
      }
    }

    &:hover {
      span {
        @include translate(10px, 0px);

        > .icon {
          opacity: 1;
        }
      }
    }

    &.btn-xs {
      padding: $btn-animate-side-xs-padding;

      span {
        > .icon {
          left: 5px;
        }
      }

      &:hover {
        span {
          @include translate(8px, 0px);
        }
      }
    }

    &.btn-sm {
      padding: $btn-animate-side-sm-padding;

      span {
        > .icon {
          left: 3px;
        }
      }

      &:hover {
        span {
          @include translate(8px, 0px);
        }
      }
    }

    &.btn-lg {
      padding: $btn-animate-side-lg-padding;

      span {
        > .icon {
          left: -6px;
        }
      }

      &:hover {
        span {
          @include translate(14px, 0px);
        }
      }
    }
  }

  &-vertical {
    span {
      transition: all 0.2s ease-out 0s;

      > .icon {
        position: absolute;
        top: -2px;
        left: 50%;
        display: block;
        font-size: $btn-animate-vertical-icon-font-size;
        @include translate(-50%, -100%);
      }
    }

    &:hover {
      span {
        @include translate(0, 150%);
      }
    }

    &.btn-xs {
      span {
        > .icon {
          top: -5px;
          font-size: $btn-animate-vertical-xs-icon-font-size;
        }
      }
    }

    &.btn-sm {
      span {
        > .icon {
          top: -3px;
          font-size: $btn-animate-vertical-sm-icon-font-size;
        }
      }
    }

    &.btn-lg {
      span {
        > .icon {
          font-size: $btn-animate-vertical-lg-icon-font-size;
        }
      }
    }
  }
}

// Modifier: `btn-tagged`
// ========================================================================

.btn-tagged {
  padding: 0;

  @include btn-tagged-variant($btn-tagged-padding-horizontal, $padding-base-vertical, $btn-tagged-padding-horizontal);

  &.btn-xs {
    @include btn-tagged-variant($padding-xs-horizontal, $padding-xs-vertical, $btn-tagged-xs-padding-horizontal);
  }

  &.btn-sm {
    @include btn-tagged-variant($padding-small-horizontal, $padding-small-vertical, $btn-tagged-sm-padding-horizontal);
  }

  &.btn-lg {
    @include btn-tagged-variant($btn-tagged-lg-padding-horizontal, $padding-large-vertical, $btn-tagged-lg-padding-horizontal);
  }

  &.btn-block {
    text-align: left;
  }
}

.btn-tag {
  display: inline-block;
  background-color: $btn-tagged-tag-bgColor;
  border-radius: $border-radius 0 0 $border-radius;
}


// Pill Modifier
// ========================================================================

.btn-pill-left {
  border-radius: 500px 0 0 500px;
}

.btn-pill-right {
  border-radius: 0 500px 500px 0;
}

// Direction Modifier
// ========================================================================

.btn-direction {
  position: relative;
  &:before {
    position: absolute;
    line-height: 0;
    content: '';
    border: 8px solid transparent;
  }
}


// Modifier: `btn-up`
// -------------------------

.btn-up:before {
  top: -16px;
  left: 50%;
  margin-left: -8px;
  border-bottom-color: $border-color-base;
}


// Modifier: `btn-right`
// -------------------------

.btn-right:before {
  top: 50%;
  right: -16px;
  margin-top: -8px;
  border-left-color: $border-color-base;
}

// Modifier: `btn-bottom`
// -------------------------

.btn-bottom:before {
  bottom: -16px;
  left: 50%;
  margin-left: -8px;
  border-top-color: $border-color-base;
}

// Modifier: `btn-left`
// -------------------------

.btn-left:before {
  top: 50%;
  left: -16px;
  margin-top: -8px;
  border-right-color: $border-color-base;
}

// Modifier: `btn-pure`
// ========================================================================

.btn-pure {
  &,
  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;

    &:hover,
    &:focus,
    &.focus {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
    }
  }

  &.btn-default {
    @include button-pure-variant($btn-pure-default-color, $btn-pure-default-hover-color);
  }

  &.btn-primary {
    @include button-pure-variant($btn-pure-primary-color, $btn-pure-primary-hover-color);
  }

  &.btn-success {
    @include button-pure-variant($btn-pure-success-color, $btn-pure-success-hover-color);
  }

  &.btn-info {
    @include button-pure-variant($btn-pure-info-color, $btn-pure-info-hover-color);
  }

  &.btn-warning {
    @include button-pure-variant($btn-pure-warning-color, $btn-pure-warning-hover-color);
  }

  &.btn-danger {
    @include button-pure-variant($btn-pure-danger-color, $btn-pure-danger-hover-color);
  }

  &.btn-dark {
    @include button-pure-variant($btn-pure-dark-color, $btn-pure-dark-hover-color);
  }

  &.btn-inverse {
    @include button-pure-variant($btn-pure-inverse-color, $btn-pure-inverse-hover-color);
  }
}