static/css/com/_bits/_button.scss

@import '../../_utils';
@import '../../_config';

/* Buttons */
%button {
    @include user-select(none);
    @include box-sizing;
    position: relative;
    display: inline-block;
    padding: 0 $unit*2;
    border: 0;
    font-size: $base-font-size;
    line-height: $unit*4;
    height: $unit*4 + 2px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    &%size_big {
        font-size: 18px;
        line-height: $unit*6.5;
        height: $unit*6.5 + 2px;
        padding: 0 $unit*4;
    }
}
%button::-moz-focus-inner {
    border: none;
    padding: 0 1px;
}


%button_default {
    @extend %button;
    position: relative;
    border-radius: 3px;
    box-shadow: 2px 2px 0 0 rgba(0,0,0, 0.1);
    background-color: #bcc0c6;
    color: #49525e;
    
    &%size_big {
        box-shadow: 4px 4px 0 0 rgba(0,0,0, 0.1);
    }

    &:hover {
        background-color: #D7D9DB;
    }

    &:active {
    }
}

%button_call-to-action {
    @extend %button;
    position: relative;
    border-radius: 3px;
    box-shadow: 2px 2px 0 0 rgba(0,0,0, 0.1);
    background-color: #ee9529;
    color: #fff;
    font-weight: normal;
    
    &%size_big {
        box-shadow: 4px 4px 0 0 rgba(0,0,0, 0.1);
    }
    
    &:hover {
        background-color: #FFB62D;
    }

    &:active {
    
    }
}