/*------------------------------------*\
    # BUTTON
\*------------------------------------*/

/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Normalize some styles.
 * 4. Fixes odd inner spacing in IE7.
 */
.gs-o-button {
    display: inline-block; /* [1] */
    vertical-align: middle; /* [2] */
    position: relative;

    overflow: visible; /* [4] */

    margin: 0; /* [3] */

    padding: $gel-spacing-unit;

    text-align: center; /* [3] */

    border: 0; /* [3] */

    &:hover,
    &:active {
        text-decoration: none; /* [3] */

        cursor: pointer;
    }

    &:active {
        top: 1px;
    }
}

.gs-o-button--big {
    padding: double($gel-spacing-unit);
}

.gs-o-button--full {
    display: block;
    width: 100%;
}

.gs-o-button--primary {
    background-color: $sp-c-charcoal;
    color: $sp-c-white;

    &:hover,
    &:active {
        background-color: $sp-c-black;
    }
}

.gs-o-button--secondary {
    background-color: $sp-c-cloud;
    color: $sp-c-charcoal;

    &:hover,
    &:active {
        background-color: darken($sp-c-cloud,5%);
    }
}

.gs-o-button--clear {
    background-color: transparent;
    color: $sp-c-charcoal;

    &:hover,
    &:active {
        background-color: transparent;
        color: $sp-c-black;
    }
}

.gs-o-button--white {
    background: $sp-c-white;
    color: $sp-c-charcoal;

    &:hover,
    &:active {
        background: $sp-c-white;
        color: $sp-c-black;
    }
}

.gs-o-button--my-bbc {
    background-color: $mb-c-blue-ribbon;
    color: $sp-c-white;

    &:hover {
        background-color: $mb-c-science-blue;
    }
}

.gs-o-button--share {
    background-color: $c-share-green;
    color: $sp-c-white;

    &:hover {
        background-color: darken($c-share-green, 5%);
    }
}

.gs-o-button--border {
    border: 1px solid $sp-c-black;
}

.gs-o-button[disabled],
.gs-o-button--disabled {
    opacity: .2;

    cursor: auto;

    &:active {
        top: 0;
    }
}