@import "variables";
@import "fonts";
@import "bourbon";

input[type="reset"].btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="file"] > input[type="button"].btn,
button.btn {
  @include appearance(none);
}

/* Hide inner focus effect in Firefox */
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;
}

@mixin button-colors($bgcolor, $color: tint($bgcolor, 90%)) {
  background: $bgcolor no-repeat 100% center;
  color: $color;
  border-color: darken($bgcolor, 5%); // btn-group support
  border-style: solid;

  &:focus,
  &:hover {
    background-color: darken($bgcolor, 3%);
    color: $color;
    text-decoration: none;
    outline: 0;
  }
  &:active, &.active {
    background-color: darken($bgcolor, 10%);
  }
}

@mixin button() {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px 15px 9px;
  font-family: $font_light;
  font-size: $type-L;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.05rem;
  text-align: center;
  vertical-align: middle;
  border: 0;
  cursor: pointer;
  background-image: none;
}

%button {
  @include button();
}

.btn {
  @extend %button;

  @include button-colors($color_button-default, $color-gray);

  &.btn-continue:after,
  &.btn-plus:before {
    @include fa-icon();
  }

  &.btn-continue,
  &.btn-plus {
    &.btn-block {
      text-align: left;
      &:after {
        position: absolute;
        right: 0.75em;
      }
    }
  }

  &.btn-continue {
    &:after {
      font-weight: bold;
      content: $fa-var-angle-right;
      padding: 0 0 0 .75em;
    }
  }

  &.btn-plus {
    &:before {
      content: $fa-var-plus;
      padding: 0 .5em 0 0;
    }
  }

}

.btn-primary {
  @include button-colors($color-blue);
}

.btn-secondary {
  @include button-colors($color-gray, $color-gray-4);

  &:focus,
  &:hover {
    background-color: #333333;
  }
  &:active {
    background-color: $color-black;
  }
}

@each $context, $color in $context-colors {
  .btn-#{$context} {
    @include button-colors($color);
  }
}

// .btn-toggle {
//   font-family: $font_light;
//   font-weight: 800;
//   background-color: #f4f4f2;
//   background-image: none;
//   color: #97948b;
//   border: 1px solid #97958c; // stroke
//   font-size: 18px;
//   letter-spacing: 0.05em;
//   text-shadow: 0 1px 0 #fff;
//   @include transition(all .2s ease-in-out);
// 
//   &:focus,
//   &:hover {
//     background-color: darken(#f4f4f2, 5%);
//     text-decoration: none;
//     outline: 0;
//     color: darken(#97948b, 5%);
//   }
//   &:active {
//     background-color: darken(#f4f4f2, 20%);
//     color: $color_black;
//   }
//   &:after {
//     display: none;
//   }
//   &[data-state="is-active"] {
//     background-color: darken(#f4f4f2, 15%);
//     color: $color_black;
//     border: 1px solid darken(#97958c, 15%);
//   }
// }

.btn-center {
  text-align:center;
}

.btn-inline,
button.btn-inline,
input[type="submit"].btn-inline {
  display:inline-block;
  width:auto;
}

/* Correct FF button padding */
@-moz-document url-prefix(http://) {
  ::-moz-focus-inner { border: 0; padding: 0; }
}