// Button
// ––––––––––––––––––––––––––––––––––––––––––––––––––

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;	// stylelint-disable-line property-no-vendor-prefix
}

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

// default buttons style
.button {
  @include button;

  $btn-border-hover: darken($button-default-border-color, $darken-hover-percent);
  $btn-bg-hover: darken($button-default-bg-color, $darken-hover-percent);

  @include button-hover($button-default-font-color, $btn-bg-hover, $btn-border-hover);

  $btn-font-hover: darken($button-default-font-color, $darken-hover-percent);

  &.button-outline {
    background-color: transparent;
    transition: $button-transition, color linear $animation-speed-fast;

    @include button-hover($btn-font-hover, transparent, $btn-border-hover);
  }

  &.button-clear {
    background-color: transparent;
    border-color: transparent;
    transition: $button-transition, color linear $animation-speed-fast;

    @include button-hover($btn-font-hover, transparent, transparent);
  }
}

// button color variations
@each $button, $colors in $buttons {
  // start with a border color half of the $darken-hover-percent to get a slight visual contrast
  $btn-border: darken(nth($colors, 1), ($darken-hover-percent / 2));
  $btn-font: nth($colors, 2);
  $btn-bg: nth($colors, 1);

  // then when we roll over we will user the full percentage to adjust the colors
  $btn-border-hover: darken($btn-border, $darken-hover-percent);
  $btn-bg-hover: darken($btn-bg, $darken-hover-percent);

  // basic coloured button
  .button.button-#{$button} {
    @include button-color-variation($btn-font, $btn-bg, $btn-border);
    @include button-hover($btn-font, $btn-bg-hover, $btn-border-hover);
  }

  // outline transparent background, use button color for font color
  .button.button-outline.button-#{$button} {
    @include button-color-variation($btn-bg, transparent, $btn-bg);
    @include button-hover($btn-bg-hover, transparent, $btn-bg-hover);
  }

  // clear transparent background and border, use button color for font color
  .button.button-clear.button-#{$button} {
    @include button-color-variation($btn-bg, transparent, transparent);
    @include button-hover($btn-bg-hover, transparent, transparent);
  }
}