@import "variable"; // variable

.btn-default{
    background: $default;
    border-color: $default;
    color: $white;
    &:hover,&:focus,&.active{
        background: darken($default,10%);
        border-color: $default;
        color: $white;
        box-shadow: none;
    }
}
.btn-primary {
    background: $primary;
    border-color: $primary;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($primary, 10%);
        border-color: $primary;
        color: $white;
        box-shadow: none;
    }
}

.btn-success {
    background: $success;
    border-color: $success;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($success, 10%);
        border-color: $success;
        color: $white;
        box-shadow: none;
    }
}

.btn-info {
    background: $info;
    border-color: $info;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($info, 10%);
        border-color: $info;
        color: $white;
        box-shadow: none;
    }
}

.btn-warning {
    background: $warning;
    border-color: $warning;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($warning, 10%);
        border-color: $warning;
        color: $white;
        box-shadow: none;
    }
}

.btn-danger {
    background: $danger;
    border-color: $danger;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($danger, 10%);
        border-color: $danger;
        color: $white;
        box-shadow: none;
    }
}

.btn-pink {
    background: $pink;
    border-color: $pink;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($pink, 10%);
        border-color: $pink;
        color: $white;
        box-shadow: none;
    }
}

.btn-dark {
    background: $dark;
    border-color: $dark;
    color: $white;
    &:hover,
    &:focus,
    &.active {
        background: darken($dark, 10%);
        border-color: $dark;
        color: $white;
        box-shadow: none;
    }
}

.btn-addon {
    position: relative;
    padding-left: 40px;
    i {
        background: rgba(0, 0, 0, 0.1);
        left: -1px;
        margin-right: 20px;
        padding: 10px;
        position: absolute;
        top: -1px;
    }
}

.btn-addon.btn-lg {
    padding-left: 60px;
    i {
        padding: 14px;
    }
}

.btn-addon.btn-md {
    padding-left: 45px;
    i {
        padding: 10px;
    }
}

.btn-addon.btn-sm {
    padding-left: 40px;
    i {
        padding: 9px;
    }
}

.btn-addon.btn-xs {
    padding-left: 25px;
    i {
//        font-size: 8px;
        padding: 5px;
    }
}

.btn-rounded {
    border-radius: 100px;
}

.btn-outline {
    background: transparent;
    color: $text;
}

.btn-flat {
    border-radius: 0px;
}