@import 'variables';

button {
    border:none;
    background:none;
    padding:10px 12px;
    font-size:13px;
    &:hover, &:focus {
        outline:none;
    }

    &.primary-color {
        background:@button-primary-color!important;
        color:@button-primary-text-color!important;
        &:hover {
            background:@button-primary-hover-color!important;
            color:@button-primary-hover-text-color!important; 
        }
    }

    &.info-color {
        background:@button-info-color!important;
        color:@button-info-text-color!important;
        &:hover {
            background:@button-info-hover-color!important;
            color:@button-info-hover-text-color!important; 
        }
    }

    &.warning-color {
        background:@button-warning-color!important;
        color:@button-warning-text-color!important;
        &:hover {
            background:@button-warning-hover-color!important;
            color:@button-warning-hover-text-color!important; 
        }
    }

    &.alert-color {
        background:@button-alert-color!important;
        color:@button-alert-text-color!important;
        &:hover {
            background:@button-alert-hover-color!important;
            color:@button-alert-hover-text-color!important; 
        }
    }

    &.disabled-color {
        background:@button-disabled-color!important;
        color:@button-disabled-text-color!important;
        &:hover {
            background:@button-disabled-color!important;
            color:@button-disabled-text-color!important; 
        }
    }

}

.btn {
    display:inline-block;
    padding:10px 12px;
    background:none;
    border:@button-border;
    border-radius:3px;
    background-color:@button-color;
    color:@button-text-color;
    font-size:13px;
    font-weight:300;
    text-decoration: none;
    transition:all 0.3s;

    &:hover, &:focus {
        outline:none;
        color:@button-hover-text-color;
        border:@button-hover-border;
    }

    &-block {
        display:inline-block;
        width:100%;
        max-width:300px;
        margin:0 auto;
        text-align:center;
    }

    &-primary {
        background-color:@button-primary-color;
        color:@button-primary-text-color;
        border:1px solid @button-primary-color;
        i {
            color:@button-primary-text-color;
            &:hover, &:focus {
                color:@button-primary-hover-text-color;
            }
        }
        &:hover, &:focus {
            background-color:@button-primary-hover-color;
            color:@button-primary-hover-text-color;
            border:1px solid @button-primary-hover-color;
        }
    }

    &-info {
        background-color:@button-info-color;
        color:@button-info-text-color;
        border:1px solid @button-info-color;
        &:hover, &:focus {
            background-color:@button-info-hover-color;
            color:@button-info-hover-text-color;
            border:1px solid @button-info-hover-color;
        }
    }

    &-warning {
        background-color:@button-warning-color;
        color:@button-warning-text-color;
        border:1px solid @button-warning-color;
        &:hover, &:focus {
            background-color:@button-warning-hover-color;
            color:@button-warning-text-color;
            border:1px solid @button-warning-hover-color;
        }
    }

    &-alert {
        background-color:@button-alert-color;
        color:@button-alert-text-color;
        border:1px solid @button-alert-color;
        &:hover, &:focus {
            background-color:@button-alert-hover-color;
            color:@button-alert-hover-text-color;
            border:1px solid @button-alert-hover-color;
        }
    }
    
}