$bodyFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
$titleFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
$codeFont: monospace;

h1 {
    font-size: 1.55rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.15rem;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgba($black, 0.3);
    margin: 1em 0;
    padding: 0;
}

@mixin button($btnColor, $color) {
    /* use @extend .button on any element (a or button) or use directly in markup class="button" */
    display: inline-block;
    padding: 5px 8px;
    background-color: $btnColor;
    color: $color !important;
    font-size: 0.90em;
    text-decoration: none;
    cursor: pointer;

    @include border-radius(3px);

    border: 1px solid transparent;
    text-align: center;

    &:hover {
        background: darken($btnColor, 10%);
        color: white;
    }

    &.disabled {
        cursor: not-allowed;
        background-color: rgba(128, 128, 128, 0.1) !important;
        color: rgba(128, 128, 128, 0.4) !important;
        border: 1px solid transparent;

        &:hover {
            cursor: not-allowed;
            background-color: rgba(128, 128, 128, 0.1) !important;
            color: rgba(128, 128, 128, 0.4) !important;
            border: 1px solid transparent;
        }
    }
}

@mixin smallButton($btnColor, $color) {
    @include button($btnColor, $color);

    font-size: 0.8em;
    padding: 3px 6px;
}

@mixin btnOutline($btnColor, $color) {
    @include button($btnColor, $color);

    background-color: transparent;
    color: $btnColor !important;
    border: 1px solid $btnColor;

    &:hover {
        color: white !important;
        border: none;
        border: 1px solid $btnColor;
        background-color: $btnColor;
    }

    &.disabled {
        cursor: not-allowed;
        color: rgba(128, 128, 128, 0.4) !important;
        border: 1px solid rgba(128, 128, 128, 0.4);

        &:hover {
            cursor: not-allowed;
            color: rgba(128, 128, 128, 0.4) !important;
            border: 1px solid rgba(128, 128, 128, 0.4);
        }
    }
}

input, textarea {
    font-size: 0.95em;
    color: $black;
}