/*
Button

To create a button, add the <code>button</code> class to any <code>&lt;a&gt;</code> element.

Markup:
<a class="button {$modifiers}">Normal</a>
<a class="button {$modifiers} button-hover">Hovered</a>
<a class="button {$modifiers} button-active">Active</a>

.button-disabled  - Disabled button.
.button-primary  - Primary button.

Styleguide 1.1
*/

button,
.button {
    border-radius: 4px;
    border: 1px solid #B0B0B0;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background-color: #FFF;
    padding: 0.25em 0.5em;
    cursor: default;
}

.button-hover,
.button:hover {
    text-decoration: none;
    opacity: 0.8;
}

.button-active,
.button:active {
    text-decoration: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25) inset;
    opacity: .5;
}

.button-disabled,
.button-disabled.button-hover,
.button-disabled:hover,
.button-disabled:active
.button-disabled.button-active {
    opacity: 1;
    box-shadow: none;
    background-color: #F3F3F3;
    border-color: #F0F0F0;
    color: #DDD;
}

.button-primary {
    background: #698DFF;
    color: white;
    border-color: #5c7bdf;
}