//==================================================
// Buttons.scss
//
// Index
// -----
// 1) Base Class & Element
// 2) Buttons Modes
// 3) Button Themes
// 4) Button Shapes
// 5) Button Sizes
//==================================================


//=========================
// 1) Base Class & Element
//=========================
button,
.btn {
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: inherit;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 0 2px 0 #c6c6c6;
  -webkit-transition: border 0.3s linear,color 0.3s linear,background-color 0.3s linear;
  transition: border 0.3s linear,color 0.3s linear,background-color 0.3s linear;
  -webkit-font-smoothing: subpixel-antialiased;
}

button:after,
button:before,
.btn:after,
.btn:before {
  box-sizing: border-box;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:hover, .btn:hover { text-decoration: none }

//=======================
// 2) Button Modes
//=======================
.btn.is-disabled {
  color: #fff;
  background-color: #999999;
}
.btn.is-disabled:hover {
  background-color: #737373;
}
.btn.is-disabled:active {
  background-color: #474747;
}

.btn.is-fixed {
  position: fixed;
}

//=========================
// 3) Button Themes
//=========================

//=======================
  // Primary Theme
//=======================
.btn--primary {
  color: #fff;
  background-color: $color-primary;
}
.btn--primary:hover {
  background-color: lighten($color-primary, 6%);
}
.btn--primary:active {
  background-color: darken($color-primary, 8%);
}

//=======================
  // General Themes
//=======================
.btn--success {
  color: #fff;
  background-color: $color-success;
}
.btn--success:hover {
  background-color: lighten($color-success, 6%);
}
.btn--success:active {
  background-color: darken($color-success, 8%);
}

.btn--warning {
  color: #fff;
  background-color: $color-warning;
}
.btn--warning:hover {
  background-color: lighten($color-warning, 6%);
}
.btn--warning:active {
  background-color: darken($color-warning, 8%);
}

.btn--danger {
  color: #fff;
  background-color: $color-danger;
}
.btn--danger:hover {
  background-color: lighten($color-danger, 6%);
}
.btn--danger:active {
  background-color: darken($color-danger, 8%);
}

.btn--info {
  color: #fff;
  background-color: $color-info;
}
.btn--info:hover {
  background-color: lighten($color-info, 6%);
}
.btn--info:active {
  background-color: darken($color-info, 8%);
}

//=========================
// 4) Button Shapes
//=========================
.btn--square { border-radius: 0 !important; }

.btn--circle { border-radius: 100% !important; }

//=========================
// 5) Button Sizes
//=========================
.btn--fill {
  display: block;
  width: 100%;
}

.btn--lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn--lg.btn--square,
.btn--lg.btn--circle {
  width: 90px;
  height: 90px;
  line-height: 70px;
}

.btn--square,
.btn--circle {
  width: 66px;
  height: 66px;
  line-height: 54px;
}

.btn--sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn--sm.btn--square,
.btn--sm.btn--circle {
  width: 44px;
  height: 44px;
  line-height: 34px;
}