/**
 * Modus Mixins
 */

// This line removes colors from $theme-colors that are inherent to Bootstrap
// It's placed in this file because it's imported in the right spot for it to work
$theme-colors: map-remove($theme-colors, "info", "light");

@mixin not($ignorList...) {

  // if only a single value given
  @if (length($ignorList)==1) {
    // it is probably a list variable so set ignore list to the variable
    $ignorList: nth($ignorList, 1);
  }

  // set up an empty $notOutput variable
  $notOutput: '';

  // for each item in the list
  @each $not in $ignorList {
    // generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
    $notOutput: $notOutput+':not(#{$not})';
  }

  // output the full :not() rule including all ignored items
  &#{$notOutput} {
    @content;
  }
}

@mixin drop-shadow($x, $y, $opacity) {
  box-shadow: $x $y 2px 0 rgba(0, 0, 0, $opacity);
}

@mixin bounce($properties, $duration) {
  transition: $properties $duration cubic-bezier(.57, .1, .73, 1.28);
}

@mixin hover {
  &:hover, &.hover { @content; }
}

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

  border-color: $border;
  @include box-shadow($btn-box-shadow);

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

    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    // Avoid using mixin so we can pass custom focus shadow properly
    @if $enable-shadows {
      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
    } @else {
      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
    }
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
    }
  }

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

    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
      }
    }
  }
}

@mixin button-outline-variant($color, $color-hover: lighten(saturate($color, 10%), 10%), $hover-background: rgba(saturate($color, 10%), .15), $active-background: rgba(saturate($color, 10%), .2), $active-border: darken($color, 5%)) {
  color: $color;
  fill: $color;
  border-color: $color;
  // background-color: $white;
  @include hover {
    color: $color-hover;
    background-color: $hover-background;
    border-color: $color-hover;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

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

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

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }
}

@mixin button-text-variant($color, $color-hover: lighten($color, 10%), $hover-background: rgba($color, .2), $active-background: rgba($color, .3), $active-color: darken($color, 10%)) {
  color: $color;
  fill: $color;
  border-color: transparent;
  background-color: transparent;
  @include hover {
  color: $color-hover;
  background-color: $hover-background;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

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

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

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }
}

@mixin badge-text-variant($color, $hover-background: rgba($color, .2)) {
  color: $color;
  background-color: transparent;

  @at-root a#{&} {
    @include hover-focus {
      color: $color;
      background-color: $hover-background;
    }

    &:focus,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 $badge-focus-width rgba($color, .5);
    }
  }
}

@mixin chip-variant($background, $color, $error,
  $hover-background: tint($background, 30%), $hover-border: tint($background, 20%),
  $active-color: darken($color, 60%),  $active-background: shade($background, 15%), $active-border: shade($background, 15%)) {
  color: $color;
  @include gradient-bg($background);

  border-color: $background;
  @include box-shadow($btn-box-shadow);

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

    border-color: $hover-border;
  }

  &.chip-input.error {
    color: shade($error,40%);
    background-color: tint($error,70%);
    border-color:  tint($error, 70%);
  }

  &:focus,
  &.focus {
    // Avoid using mixin so we can pass custom focus shadow properly
    @if $enable-shadows {
      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $background, 15%), .5);
    } @else {
      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $background, 15%), .5);
    }
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: $color;
    background-color: $background;
    border-color: $background;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
    }
  }

  &: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;

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $background, 15%), .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $background, 15%), .5);
      }
    }
  }
}

@mixin chip-outline-variant($background, $color, $error,
  $color-hover: lighten($color, 10%), $border: shade($background, 20%),
  $hover-background: tint($background,60%),
  $active-background: tint($background,15%), $active-border: shade($background, 40%)) {
  color: $color;
  border-color: $border;

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

  &.chip-input.error {
    color: shade($error,40%);
    background-color: tint($error,90%);
    border-color:  tint($error, 50%);
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  &.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;

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }
}

@mixin chip-reverse-variant($background, $color, $error,
  $color-hover: lighten($color, 10%), $hover-background: tint($background, 95%),
  $active-background: tint($background, 90%), $active-border: darken($background, 5%)) {
  color: $color;
  border-color: $color;
  background-color: $white;

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

  &.chip-input.error {
    color: shade($error,40%);
    background-color: tint($error,90%);
    border-color:  tint($error, 50%);
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

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

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

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }
}

@mixin form-control-focus($ignore-warning: true) {
  &:focus, &.focus {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    border-color: $input-border-color;
    border-bottom-color: $input-focus-border-color !important;
    border-bottom-width: $input-focus-bottom-border !important;
    border-bottom-style: solid !important;
    outline: 0;
    // Avoid using mixin so we can pass custom focus shadow properly
    // @if $enable-shadows {
    //   box-shadow: $input-box-shadow, $input-focus-box-shadow;
    // } @else {
    //   box-shadow: $input-focus-box-shadow;
    // }
  }
}