//
// Button Flat Type
//

// e.g. @include u-button-flat ($g-color-primary, $g-color-white, $g-color-black);
@mixin u-button-flat ($color-bg-brd, $color-text, $color-text-hover) {
  color: $color-text;
  background-color: $color-bg-brd;

  &:hover,
  &.active {
    border-color: lighten($color-bg-brd, 10%);
    background-color: lighten($color-bg-brd, 10%);
  }

  &:hover,
  &:focus,
  &.active {
    color: $color-text-hover;
  }

  // Test from Oleg
  &.g-btn-hover-reset {
    &:hover,
    &.active {
      background-color: $color-bg-brd;
      border-color: $color-bg-brd;
    }
  }
}



//
// Button Outline Type
//

// e.g. @include u-hover-btn-v1-1 ($g-color-primary, $g-color-white);
@mixin u-button-outline ($color-bg-brd, $color-text, $color-text-hover) {
  color: $color-text;
  border-color: $color-bg-brd;
  background-color: transparent;

  &:focus,
  &.active {
    color: $color-text-hover;
    background-color: $color-bg-brd;
  }

  &:hover {
    color: $color-text-hover;
    background-color: $color-bg-brd
  }
}



//
// Button Gradient Type
//

// e.g. @include u-button-gradient ($g-color-primary, $g-color-red);
@mixin u-button-gradient ($btn-left, $btn-right){
  color: $g-color-white;
  background: linear-gradient(to right, $btn-left 0%, $btn-right 100%) !important;
  border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
  border-image-slice: 1;

  &:hover,
  &:focus,
  &.active {
    opacity: .9;
    color: $g-color-white;
  }
}



//
// Button Gradient Outline Type
//

// e.g. @include u-button-outline-gradient ($g-color-primary, $g-color-red);
@mixin u-button-outline-gradient ($btn-left, $btn-right){
  color: $g-color-gray-dark-v3;
  background: transparent;
  border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
  border-image-slice: 1;

  &:hover,
  &:focus,
  &.active {
    background: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
    color: $g-color-white;
  }
}