[class*=common-button] {
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;
    position: relative;
    border: none;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    @include transition(all .3s ease-in-out);
    position: relative;
    @include radius(4px);

    &:disabled {
        color: $white-color;
        background-color: $body-color;
        border-color: 0;
        opacity: 0.65;
        cursor: not-allowed;
    }
    &.is-border {
        background-color: transparent;
        color: $heading-color;
        position: relative;
        padding-bottom: 5px;
        &::after{
            content:'';
            width:50%;
            height: 1px;
            background-color: $secondary-color;
            position: absolute;
            bottom:0px;
            @include transition (width .5s ease-in-out);
            left:0;
        }
        &:hover {
            &::after{
                width: 100%;
            }
        }
    }
    &.is-bg{
        background-color: lighten($secondary-color, 25%);
        padding:7px 15px;
        &:hover{
            background-color: $secondary-color;
            color:$white-color;
        }
    }


}

.buttons {
    @include display-flex(flex);
    @include justify-content-start;
    @include align-items-start;
    button,
    a {
        &:not(:last-child) {
            margin-right: 1rem;
        }
    }

    &.is-center {
        @include justify-content-center;
        @include align-items-center;
    }

    &.is-between {
        @include justify-content-between;
        @include align-items-center;
    }

    &.is-end {
        @include justify-content-end;
        @include align-items-center;
    }
}