// Base button styles
// -------------------------------------------------------------------
.btn {
    background-image: none; // Reset unusual Firefox-on-Android default style: https://github.com/necolas/normalize.css/issues/214
    border-radius: $border-radius;
    border-style: solid;
    border-width: $border-width;
    cursor: pointer;
    display: inline-block; // Allow us to better style box model properties
    font-family: $font-family--ui;
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: $line-height--base;
    margin-bottom: 0; // For input.btn
    padding: $button-padding;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color $fade, background $fade, color $fade, border $fade;
    user-select: none;
    vertical-align: middle; // Line different size buttons up nicely
    white-space: nowrap; // Stop buttons wrapping and looking broken
    -webkit-appearance: none;
            appearance: none;

    &:hover,
    &:focus {
        outline: 0;
        text-decoration: none;
    }

    &:active {
        outline: 0;
        background-image: none;
    }

    &.disabled,
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        cursor: not-allowed !important;
        opacity: 1; // iOS fix for unreadable disabled content
        pointer-events: none; // Future-proof disabling of clicks
    }

    @media screen and (max-width: $breakpoint--sm) {
        display: block;
        margin-bottom: $space-1;
    }
}

a.btn {
    &.disabled,
    fieldset[disabled] & {
        pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
}


// Button skins
// -------------------------------------------------------------------
// Default button
.btn--default {
    background-color: $primary-color;
    border-color: $primary-color;
    color: $white;

    &:hover,
    &:focus {
        background-color: darken($primary-color, 10%);
        border-color: darken($primary-color, 10%);
    }

    &:active {
        background-color: darken($primary-color, 20%);
        border-color: darken($primary-color, 20%);
    }
}

// Outline button
.btn--outline,
.btn--outline:visited {
    background-color: transparent;
    border-color: $border-color;
    border-width: $border-width;
    color: $text-color;

    &:hover,
    &:focus {
        background-color: transparent;
        border-color: $dark-gray;
    }

    &:active {
        background-color: transparent;
        border-color: $light-gray;
    }
}
