[class*=common-button] {
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;
    padding: .5rem 2rem;
    display: -webkit-inline-box;
    display: inline-flex;
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 164px;
    min-height: 40px;
    border: none;
    outline: none;
    line-height: inherit;
    -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;
  
    &:disabled {
        color: $white-color;
        background-color: $body-color;
        border-color: 0;
        opacity: 0.65;
        cursor: not-allowed;
    }
  
    &.is-disable {
        color: $white-color;
        background-color: $body-color;
        border-color: $body-color;
  
        &.is-icon {
            @include display-flex(flex);
            @include justify-content-start;
            @include align-items-center;
            color: $white-color;
  
            i {
                margin-right: .5rem;
                font-size: .9375rem;
            }
        }
    }
  
    &.is-bg {
        color: $white-color;
        background-color: $secondary-color;
        border-color: $secondary-color;
  
        &:disabled {
            color: $white-color;
            background-color: $grey-color;
            border-color: transparent;
            opacity: 0.65;
            cursor: not-allowed;
        }
        &.is-red{
            background-color: $red-color;
        }
        &.is-orange{
            background-color:$orange-color;
        }
        &.is-pink{
            background-color:$secondary-color;
        }
        &.is-white{
            background-color: $white-color;
            color:$body-color;
        }
        &:hover {
            background-color: $secondary-color;
            border-color: $secondary-color;
            color:$white-color;
        }
  
        &.is-disable {
            color: $white-color;
            background-color: $grey-color;
            border-color: $grey-color;
  
            
        }
        &.is-icon {
          @include display-flex(flex);
          @include justify-content-start;
          @include align-items-center;
          color: $white-color;
  
          i {
              margin-right: .5rem;
              font-size: 1.2rem;
          }
      }
    }
  
    &.is-full-line {
        width: 100%;
    }
  
    &.is-clear {
        background-color: transparent;
        border-width: 0;
        min-width: auto;
        @include display-flex(flex);
        @include justify-content-start;
        @include align-items-center;
        color: $heading-color;
        font-size: .9375rem;
        padding:0;
        min-height: initial;
        min-width: initial;
        
        svg {
            margin-left: .5rem;
            @include transition(margin .5s ease-in-out);
        }
        &.is-red{
            color: $secondary-color;
        }
        &.is-orange{
            color:$orange-color;
        }
        &.is-pink{
            color:$secondary-color;
        }
        &.is-blue{
            color:$secondary-color;
        }
  
        &:hover {
            color: $secondary-color;
            svg{
                margin-left:.6125rem;
            }
        }
    }
  
    &.is-border {
        background-color: transparent;
        color: $heading-color;
        border:1px solid;
        border-color: $border-color;
  
        &.is-icon {
            @include display-flex(flex);
            @include justify-content-start;
            @include align-items-center;
            color: $heading-color;
            font-size: .9375rem;
  
            i {
                margin-right: .5rem;
            }
        }
        &:hover{
            border-color: $secondary-color;
            color:$secondary-color;
        }
    }
  
    &.no-border {
        background-color: transparent;
        color: $secondary-color;
        border-color: transparent;
  
        &.is-icon {
            @include display-flex(flex);
            @include justify-content-start;
            @include align-items-center;
            color: $secondary-color;
            font-size: .9375rem;
  
            i {
                margin-right: .5rem;
            }
        }
    }
  
    // @media #{$break1} {
    //     &.full-line-mobile {
    //         width: 100%;
    //     }
    // }
  
  }
  
  .buttons {
  
    button,a {
        &:not(:last-child) {
            margin-right: 1rem;
        }
    }
  
    &.is-center {
        @include display-flex(flex);
        @include justify-content-center;
        @include align-items-center;
    }
    &.is-between{
        @include display-flex(flex);
        @include justify-content-between;
        @include align-items-center;
    }
    &.is-end {
     @include display-flex(flex);
     @include justify-content-end;
     @include align-items-center;
 }
  }