//
// Keystroke Variables
//

// We use these to control text styles.
$keystroke-font:            "Consolas", "Menlo", "Courier", monospace !default;
$keystroke-font-size:       emCalc(15px) !default;
$keystroke-font-color:      #222 !default;
$keystroke-font-color-alt:  #fff !default;
$keystroke-function-factor: 7% !default;

// We use this to control keystroke padding.
$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px) !default;

// We use these to control background and border styles.
$keystroke-bg:              darken(#fff, $keystroke-function-factor) !default;
$keystroke-border-style:    solid !default;
$keystroke-border-width:    1px !default;
$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor) !default;
$keystroke-radius:          $global-radius !default;

//
// Keystroke Mixins
//

// We use this mixin to create keystroke styles.
@mixin keystroke($bg:$keystroke-bg) {
  // This find the lightness percentage of the background color.
  $bg-lightness: lightness($bg);

  background-color: $bg;
  border-color: darken($bg, $keystroke-function-factor);

  // We adjust the font color based on the brightness of the background.
  @if $bg-lightness > 70% { color: $keystroke-font-color; }
  @else { color: $keystroke-font-color-alt; }

  border-style: $keystroke-border-style;
  border-width: $keystroke-border-width;
  margin: 0;
  font-family: $keystroke-font;
  font-size: $keystroke-font-size;
  padding: $keystroke-padding;
}


@if $include-html-media-classes {

  /* Keystroke Characters */
  .keystroke,
  kbd {
    @include keystroke;
    @include radius($keystroke-radius);
  }

}