// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;
  }
}

@mixin button-outline-variant($color, $hover-color: color-yiq($color), $hover-background: $color, $hover-border: $color, $active-background: darken($color, 7.5%), $active-border: darken($color, 10%)) {
  color: $color;
  background-color: transparent;
  background-image: none;
  border-color: $color;

  @include hover {
    color: $hover-color;
    background-color: $hover-background;
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-background;
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    border-color: $active-border;
  }
}

@mixin button-fab-variant($background, $border, $color: false) {
  $hover-background: if($background == transparent, transparent, darken($background, 7.5%));
  $active-background: if($background == transparent, transparent, darken($background, 10%));
  $hover-border: if($border == transparent, transparent, darken($border, 10%));
  $active-border: if($border == transparent, transparent, darken($border, 12.5%));

  $color: if($color != false, $color, if($background == transparent, $btn-clear-color, color-yiq($background)));
  $hover-color: if($color != false, $color, if($hover-background == transparent, $btn-clear-color, color-yiq($hover-background)));
  $active-color: if($color != false, $color, if($active-background == transparent, $btn-clear-color, color-yiq($active-background)));

  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  @include hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-background;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: $color;
    background-color: $background;
    border-color: $border;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;
  }
}

@mixin button-icon-variant($color) {
  $hover-color: darken($color, 7.5%);
  $active-color:  darken($color, 10%);
  $hover-background: rgba(color-yiq(color-yiq($hover-color)), .08);
  $active-background: rgba(color-yiq(color-yiq($active-color)), .15);

  color: $color;
  @include gradient-bg(transparent);
  border-color: transparent;

  @include hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-background;
  }

  &:focus,
  &.focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-background;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: $color;
    @include gradient-bg(transparent);
    border-color: transparent;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: $active-color;
    @include gradient-bg($active-background);
    border-color: $active-background;
  }
}

@mixin button-clear-variant($color) {
  $background: transparent;
  $focus-background: rgba(color-yiq(color-yiq($color)), .08);
  $active-background: rgba(color-yiq(color-yiq($color)), .15);
  $border: $background;
  $focus-border: $focus-background;
  $active-border: $active-background;

  @include bmd-button-variant($color,
    $background,
    $focus-background,
    $active-background,
    $border,
    $focus-border,
    $active-border);
}

@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
  color: $color;
  @include gradient-bg($background);
  border-color: transparent;

  @include hover {
    color: $color;
    @include gradient-bg($focus-background);
    border-color: $focus-border;
  }

  &:focus,
  &.focus {
    color: $color;
    @include gradient-bg($focus-background);
    border-color: $focus-border;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    @include gradient-bg($focus-background);
    border-color: $focus-border;

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      @include gradient-bg($active-background);
      border-color: $active-border;
    }
  }

  // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
  .open > &.dropdown-toggle.btn-icon {
    color: inherit;
    @include gradient-bg($background);
    background-color: $background;

    // leave hover on with the lighter focus color
    &:hover {
      @include gradient-bg($focus-background);
    }
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      @include gradient-bg($background);
      border-color: $border;
    }
    @include hover {
      @include gradient-bg($background);
      border-color: $border;
    }
  }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  @if $enable-rounded {
    border-radius: $border-radius;
  } @else {
    border-radius: 0;
  }

  .uex-icon {
    font-size: $font-size;
  }
}

@mixin button-icon-size($padding-y, $font-size, $line-height) {
  $btn-icon-size: get-btn-height($padding-y, $font-size, $line-height);
  width: $btn-icon-size;
  min-width: $btn-icon-size;
  max-width: $btn-icon-size;
  height: $btn-icon-size;
  min-height: $btn-icon-size;
  max-height: $btn-icon-size;
  font-size: $font-size;

  .uex-icon {
    font-size: $font-size * 1.5;
  }
}

@function get-btn-height($padding, $font-size, $line-height) {

  $n-padding: $padding;
  @if unit($padding) == "rem" {
    $n-padding: strip-unit($padding) * $font-size-relative;
  }

  $n-font-size: $font-size;
  @if unit($font-size) == "rem" {
    $n-font-size: strip-unit($font-size) * $font-size-relative;
  }

  $n-line-height: $line-height;
  @if unit($line-height) == "rem" {
    $n-line-height: strip-unit($line-height) * $font-size-relative;
  }

  $n-border-width: $btn-border-width;
  @if unit($border-width) == "rem" {
    $n-border-width: strip-unit($border-width) * $font-size-relative;
  }

  @return ($n-line-height * $n-font-size) + ($n-padding * 2) + ($n-border-width * 2);
}