/*----------------------------------------------------------------------------*\
    Buttons
    .button

\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/

$use-buttons: true !default;

/*  Component
\*----------------------------------------------------------------------------*/

@if $use-buttons == true{

    .button {
        width: auto;
        height: auto;
        border: none;
        background-color: #FFF;
        color: #000;
        transition: all .3s;
        outline: none;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        // Press styling
        &:active {
            transform: scale(0.95);
        }

        // Disabled styling
        &:disabled {
            cursor: not-allowed;
            opacity: 0.25;
        }

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

        /**  Remove excess padding and border in Firefox 4+ */
        &::-moz-focus-inner {
            border: 0;
            padding: 0;
        }
    }

    // FULL WIDTH BUTTON MODIFIER
    .button--full {
        display: block;
        width: 100%;
    }

    .button--loading {
        cursor: wait;
    }
}