.dp-button{
    display:inline-block;
    text-align:center;
    text-decoration:none;
    border:0;
    outline:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    font-family: $text-family-rg;
    border-radius:3px;
    -webkit-transition:all .25s ease;
    transition:all .25s ease;
    cursor: pointer;
}

.dp-button.button-big{
    font-size:15px;
    line-height:15px;
    font-weight:300;
    padding:16px 35px
}

.dp-button.button-medium{
    font-size:13px;
    line-height:13px;
    font-weight:300;
    padding:13px 25px
}

.dp-button.button-small{
    font-size:11px;
    line-height:11px;
    font-weight:300;
    padding:10px 15px
}

.dp-button.dp-button--inline{
    &.button--loading{
        display: inline-flex;
    }
}

.dp-button.button--loading{
    padding-left:3em;
    position:relative;
    display: flex;
    align-items:center
}

.dp-button.button--loading:after{
    content:'';
    width:.8em;
    height:.8em;
    position:absolute;
    border-radius:50%;
    border: 5px solid;
    border-color:rgba(255,255,255,.3);
    border-top-color:#fff;
    -webkit-animation:dp-preloader-spin .7s infinite linear;
    animation:dp-preloader-spin .7s infinite linear;left:1em
}

.dp-button.button--round{
    text-transform:uppercase;
    border-radius:30px;
    font-weight:600
}

.dp-button.primary-green{
    background-color: $primary-green;
    border:1px solid $primary-green;
    color:#fff
}

.dp-button.primary-green:hover{
    background-color: $dark-green;
    border:1px solid $dark-green;
    color:#fff
}

.dp-button.primary-grey{
    background-color:#666;
    border:1px solid #666;
    color:#fff
}

.dp-button.button-outline--primary{
    border-color: $primary-green;
    color: $primary-green;
    border: 1px solid;
    background: #fff;
    &:hover{
        background: rgba(51, 173, 115, 0.2)
    }
    &.button--loading:after{
        border-color: rgba(0,0,0,0.3);
        border-top-color: #eee;
    }
}

.dp-button.primary-grey:hover{
    background-color:#333;
    border:1px solid #333;
    color:#fff
}

.dp-button.primary-brown{
    background-color: $dark-brown;
    border:1px solid $dark-brown;
    color:#fff
}

.dp-button.primary-brown:hover{
    background-color:#594103;
    border:1px solid #594103;
    color:#fff
}

.dp-button.link-green{
    color: $primary-green
}

.dp-button.link-green:hover{
    color: $dark-green;
}

.dp-button:disabled{
    pointer-events:none;
    opacity:.4

}
.dp-button.button--has-icon{
    width:36px;
    height:36px;
    border:1px solid #e8e8e8;
    border-radius:0;
    font-size:22px;
    background-color:transparent
}

.dp-button.button--has-icon.is-spinning [class*=-icon]{
    display:inherit;
    -webkit-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite
}

.dp-button.button--has-icon:hover{
    border-color:#cfcfcf;
    background-color:#fff
}