/**
 *  components: button
 *
 *  <a class="button" href="#">
 *      button
 *  </a>
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

$crispy__button__font-family: $crispy__font-family !default;
$crispy__button__font-weight: $crispy__font-weight !default;
$crispy__button__font-size: $crispy__font-size !default;
$crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints !default;

$crispy__button__padding: 0.4em 0.8em !default;
$crispy__button__padding-breakpoints: (
    $crispy__md: 0.6em 1.2em
) !default;

$crispy__button__margin: $crispy__margin !default;
$crispy__button__margin-breakpoints: $crispy__margin-breakpoints !default;

@mixin crispy__button() {
    .button {
        appearance: none;
        position: relative;
        display: inline-block;
        text-decoration: none;

        font-family: $crispy__button__font-family;
        font-weight: $crispy__button__font-weight;

        font-size: $crispy__button__font-size;
        @include crispy__media-breakpoints('font-size', $crispy__button__font-size-breakpoints);

        margin: $crispy__button__margin;
        @include crispy__media-breakpoints('margin', $crispy__button__margin-breakpoints);

        padding: $crispy__button__padding;
        @include crispy__media-breakpoints('padding', $crispy__button__padding-breakpoints);

        &:hover {
            cursor: pointer;
            text-decoration: none;
        }

        &:focus {
            outline: none;
        }
    }
}
