// Buttons
//
// Markup:
// <button class="px2-btn">Default Button</button>
//
// Styleguide 1.0

// elements
//
// Markup:
// <p><button class="px2-btn">Default Button</button></p>
// <p><input type="button" class="px2-btn" value="input type=button" /></p>
// <p><input type="submit" class="px2-btn" value="input type=submit" /></p>
// <p><a href="javascript:;" class="px2-btn">anchor</a></p>
//
// Styleguide 1.1

// intention
//
// Markup:
// <p><button class="px2-btn">Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary">Primary Button</button></p>
// <p><button class="px2-btn px2-btn--secondary">Secondary Button</button></p>
// <p><button class="px2-btn px2-btn--danger">Danger Button</button></p>
// <p><button class="px2-btn px2-btn--download">Download Button</button></p>
// <p><button class="px2-btn px2-btn--download px2-btn--block px2-btn--lg">
//     Download
//     <div><small>Pickles 2 Desktop Tool @2.0.0-beta.14</small></div>
//     <div><small>for Mac</small></div>
// </button></p>
// <p><button class="px2-btn" disabled>Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary" disabled>Default Button</button></p>
// <p><button class="px2-btn px2-btn--secondary" disabled>Default Button</button></p>
// <p><button class="px2-btn px2-btn--danger" disabled>Default Button</button></p>
// <p><button class="px2-btn px2-btn--download" disabled>Default Button</button></p>
//
// Styleguide 1.2

// Sizing
//
// Markup:
// <p><button class="px2-btn px2-btn--sm">Default Button</button></p>
// <p><button class="px2-btn">Default Button</button></p>
// <p><button class="px2-btn px2-btn--lg">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block px2-btn--sm">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block px2-btn--lg">Default Button</button></p>
//
// Styleguide 1.3
.px2-btn{
    display: inline-block;
    border-radius: 1px;
    background-color: #fff;
    color: #666;
    border: 1px solid #666;
    box-shadow: 0 2px 0px rgba(0,0,0,0.1);
    // text-shadow: 0px 0px 3px rgba(0,0,0,0.1);
    padding: 0.5em 2em;
    font-size:1em;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    align-items: stretch;
    font-family: sans-serif;

    &:focus,
    &:hover{
        background-color: #f9f9f9;
        outline: none;
    }
    &:hover{
        background-color: #f0f0f0;
    }
    &:active{
        background-color: #333;
        color: #fff;
        box-shadow: inset 0 3px 15px rgba(0,0,0,0.3);
    }

    &.px2-btn--primary{
        border-color: #00a0e6;
        background-color: #f5fbfe; // rgba(0,160,230,0.05);
        color: #00a0e6;
        &:focus,
        &:hover{
            background-color: #d9f1fb; // rgba(0,160,230,0.15);
        }
        &:hover{
            background-color: #ccecfa; // rgba(0,160,230,0.3);
        }
        &:active{
            background-color: #00a0e6;
            color: #fff;
        }
    }
    &.px2-btn--secondary{
        border-color: #999;
        background: #fff;
        color: #999;
        &:focus,
        &:hover{
            background-color: #f9f9f9;
        }
        &:hover{
            background-color: #f0f0f0;
        }
        &:active{
            background-color: #333;
            color: #fff;
        }
    }
    &.px2-btn--danger{
        border-color: #e86a60;
        background-color: #fdf8f8; // rgba(232,106,96,0.05);
        color: #e86a60;
        &:focus,
        &:hover{
            background-color: #fce9e7; // rgba(232,106,96,0.15);
        }
        &:hover{
            background-color: #fae1df; // rgba(232,106,96,0.3);
        }
        &:active{
            background-color: #e86a60;
            color: #fff;
        }
    }
    &.px2-btn--download{
        border-color: #4ad64d;
        background-color: #f7fcf7; // rgba(74,214,77,0.05);
        color: #4ad64d;
        &:focus,
        &:hover{
            background-color: #e4f9e4; // rgba(74,214,77,0.15);
        }
        &:hover{
            background-color: #dbf7db; // rgba(74,214,77,0.3);
        }
        &:active{
            background-color: #4ad64d;
            color: #fff;
        }
    }

    &--sm{
        font-size:0.8em;
    }
    &--lg{
        font-size:1.2em;
    }
    &--block{
        display: block;
        width: 100%;
    }


    &[disabled]{
        border-color: #ddd;
        background-color: rgba(153,153,153,0.05);
        color: #ddd;
        cursor: default;
        &:focus,
        &:hover{
            border-color: #ddd;
            background-color: rgba(153,153,153,0.05);
            color: #ddd;
            cursor: default;
        }
    }
}