// Name:            Buttons
//
// Component:       `btn`
//
// Modifiers:       `btn-block`
//                  `btn-outline`
//                  `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-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, .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-100 !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-400 !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-400 !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(24px) !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(13px) !default;
$btn-floating-sm-size: pxtorem(40px) !default;

/* $btn-floating-sm-padding:                13px !default; */
$btn-floating-sm-font-size: pxtorem(15px) !default;
$btn-floating-lg-size: pxtorem(70px) !default;

/* $btn-floating-lg-padding:                15px !default; */
$btn-floating-lg-font-size: pxtorem(30px) !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-300 !default;
$btn-inverse-disabled-bg: $inverse !default;
$btn-inverse-disabled-border: $btn-dark-disabled-bg !default;
$btn-pure-default-color: $gray-400 !default;
$btn-pure-default-hover-color: $gray-300 !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
  )
) !default;

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

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

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

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

  &.disabled,
  &:disabled,
  &.disabled:hover,
  &:disabled:hover {
    cursor: not-allowed;
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active {
    box-shadow: none;

    &:focus {
      box-shadow: none; // (remove focus outline style)
    }
  }

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

a.btn:not(.btn-link) {
  text-decoration: none;

  &, &:active, &.active {
    text-decoration: none;
  }
}

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

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

// Modifier: `btn-outline`
// ========================================================================

.btn-outline {
  &-default,
  &.btn-default {
    @include button-outline-styles-variant("default");
  }

  &-primary,
  &.btn-primary {
    @include button-outline-styles-variant("primary");
  }

  &-success,
  &.btn-success {
    @include button-outline-styles-variant("success");
  }

  &-info,
  &.btn-info {
    @include button-outline-styles-variant("info");
  }

  &-warning,
  &.btn-warning {
    @include button-outline-styles-variant("warning");
  }

  &-danger,
  &.btn-danger {
    @include button-outline-styles-variant("danger");
  }

  &-dark,
  &.btn-dark {
    @include button-outline-styles-variant("dark");
  }

  &-inverse,
  &.btn-inverse {
    @include button-outline-styles-variant("inverse");
  }
}

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

.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-sm, $line-height-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");
}

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

.btn-flat {
  background: none;
  border: none;
  box-shadow: none;

  &.disabled {
    color: $btn-flat-disabled-color;
  }
}

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

.btn-icon, .btn.icon {
  padding: pxtorem(10px);
  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%;
    transform: translate(0, 0);
  }

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

    span {
      transition: transform .2s ease-out 0s;

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

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

        > .icon {
          opacity: 1;
        }
      }
    }

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      span {
        transform: 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 {
  @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,
  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active,
  .open > &.dropdown-toggle,
  .show > &.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);
  }
}