// BUTTON STYLES ===========================================
// =========================================================
.btn {
    background-color: $jcf-color-text-inverse;
    color: $jcf-color-text-secondary;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    border: none; 
    border-radius: 2px;
    padding: 8px 15px;
    cursor: pointer;
    transform: scale(1);
    transition: all .1s;
    @include card(1);
    
    &:hover,
    &:focus {
        @include card(2);
        outline: none;
        transform: scale(1.02);
        transition: all .1s;
    }
    
    &:active {
        @include card(1);
        outline: none;
        transform: scale(1);
        transition: all .1s;
    }
    
    + .btn {
        margin-left: 15px;
    }
}
    
.btn-primary { 
    background-color: $jcf-color-accent;
    color: $jcf-color-text-inverse;
}


// BUTTON FOOTER STYLES ------------------------------------
// ---------------------------------------------------------
.btn-footer {
    text-align: center;
    border-top: 1px solid $jcf-color-divider;
    background-color: $jcf-color-primary-light;
    margin: $jcf-form-padding (-$jcf-form-padding) (-$jcf-form-padding);
    padding: ($jcf-form-padding/2) $jcf-form-padding;
}