// Mixins // Bootstrap Mixins @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {

$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);

}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {

$min: map-get($breakpoints, $name);
@return if($min !=0, $min, null);

}

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {

$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {

$min: breakpoint-min($name, $breakpoints);

@if $min {
  @media (min-width: $min) {
    @content;
  }
}

@else {
  @content;
}

}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Makes the @content apply to the given breakpoint and narrower. @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {

$max: breakpoint-max($name, $breakpoints);

@if $max {
  @media (max-width: $max) {
    @content;
  }
}

@else {
  @content;
}

}

// Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {

$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);

@if $min !=null and $max !=null {
  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

@else if $max==null {
  @include media-breakpoint-up($lower, $breakpoints) {
    @content;
  }
}

@else if $min==null {
  @include media-breakpoint-down($upper, $breakpoints) {
    @content;
  }
}

}

// Media between the breakpoint's minimum and maximum widths. // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {

$min: breakpoint-min($name, $breakpoints);
$max: breakpoint-max($name, $breakpoints);

@if $min !=null and $max !=null {
  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

@else if $max==null {
  @include media-breakpoint-up($name, $breakpoints) {
    @content;
  }
}

@else if $min==null {
  @include media-breakpoint-down($name, $breakpoints) {
    @content;
  }
}

}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {

@return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");

}

@mixin hover-focus {

&:hover,
&:focus {
  @content;
}

}

// Background color @mixin bg-variant($parent, $color) {

#{$parent} {
  background-color: $color !important;
}

a#{$parent},
button#{$parent} {
  @include hover-focus {
    background-color: darken($color, 10%) !important;
  }
}

}

// Typography @mixin text-emphasis-variant($parent, $color) {

#{$parent} {
  color: $color !important;
}

a#{$parent} {
  @include hover-focus {
    color: darken($color, 10%) !important;
  }
}

}

// Placeholder @mixin placeholder {

&::placeholder {
  @content;
}

}

/// Grid system // // Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) {

width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;

}

// For each breakpoint, define the maximum width of the container in a media query @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {

@each $breakpoint,
$container-max-width in $max-widths {
  @include media-breakpoint-up($breakpoint, $breakpoints) {
    max-width: $container-max-width;
  }
}

}

@mixin make-row() {

display: flex;
flex-wrap: wrap;
margin-right: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);

}

@mixin make-col-ready() {

position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);

}

@mixin make-col($size, $columns: $grid-columns) {

flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);

}

@mixin make-col-offset($size, $columns: $grid-columns) {

$num: $size / $columns;
margin-left: if($num==0, 0, percentage($num));

}

@mixin clearfix() {

&::after {
  display: block;
  clear: both;
  content: "";
}

}

@mixin float-left {

float: left !important;

}

@mixin float-right {

float: right !important;

}

@mixin float-none {

float: none !important;

}

// CSS image replacement @mixin text-hide($ignore-warning: false) {

// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;

@if ($ignore-warning !=true) {
  @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
}

}

// Only display content to screen readers // // See: a11yproject.com/posts/how-to-hide-content/ // See: hugogiraudel.com/2016/10/13/css-hide-and-seek/

@mixin sr-only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;

}

// Use in conjunction with .sr-only to only display content when it's focused. // // Useful for “Skip to main content” links; see www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // // Credit: HTML5 Boilerplate

@mixin sr-only-focusable {

&:active,
&:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

}

@mixin invisible($visibility) {

visibility: $visibility !important;

}

// MDB Mixins // Set the color of the button and badge @function set-notification-text-color($color) {

@if (lightness($color) > 80) {
  @return $black-base; // Lighter backgorund, return dark color
}

@else {
  @return $white-base; // Darker background, return light color
}

}

// Make button @mixin make-button ($name, $color) {

.btn-#{$name} {
  background-color: $color !important;
  color: set-notification-text-color($color);

  &:hover {
    background-color: lighten($color, 5%);
    color: set-notification-text-color($color);
  }

  &:focus,
  &.focus {
    box-shadow: $z-depth-1-half;
  }

  &:focus,
  &:active,
  &.active {
    background-color: darken($color, 20%);
  }

  &.dropdown-toggle {
    background-color: $color !important;

    &:hover,
    &:focus {
      background-color: lighten($color, 5%) !important;
    }
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active,
  .show>&.dropdown-toggle {
    box-shadow: $z-depth-1-half;
    background-color: darken($color, 20%) !important;
  }

  &:not([disabled]):not(.disabled):active:focus,
  &:not([disabled]):not(.disabled).active:focus,
  .show>&.dropdown-toggle:focus {
    box-shadow: $z-depth-1-half;
  }
}

.#{$name}-ic {
  color: $color !important;

  &:hover,
  &:focus {
    color: $color;
  }
}

a.btn:not([href]):not([tabindex]),
a.btn:not([href]):not([tabindex]):focus,
a.btn:not([href]):not([tabindex]):hover {
  color: set-notification-text-color($color);
}
table {
  &.table {
    a {
      &.btn {
        &.btn-#{$name} {
          color: set-notification-text-color($color);
        }
      }
    }
  }
}

}

// Make outline button @mixin make-outline-button ($name, $color) {

.btn-outline-#{$name} {
  border: 2px solid $color !important;
  background-color: transparent !important;
  color: $color !important;

  &:hover,
  &:focus,
  &:active,
  &:active:focus,
  &.active {
    border-color: $color !important;
    background-color: transparent !important;
    color: $color !important;
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active,
  .show>&.dropdown-toggle {
    box-shadow: $z-depth-1-half;
    background-color: transparent !important;
    border-color: $color !important;
  }

  &:not([disabled]):not(.disabled):active:focus,
  &:not([disabled]):not(.disabled).active:focus,
  .show>&.dropdown-toggle:focus {
    box-shadow: $z-depth-1-half;
  }
}

}

// Make gradient @mixin make-gradient($name, $value) {

.#{$name}-gradient {
  background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
}

}

$opacity: .9;

// Make gradient @mixin make-gradient-rgba($name, $value) {

.#{$name}-gradient-rgba {
  background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
}

}

// Make gradient button @mixin make-gradient-button($name, $value) {

.btn {
  &.#{$name}-gradient {
    transition: .5s ease;
    color: $white-base;

    &:hover,
    &:focus,
    &:active,
    &:active:focus &.active {
      background: linear-gradient(lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
    }
  }
}

}

// Button size @mixin button-size($padding-y, $padding-x, $font-size) {

padding: $padding-y $padding-x;
font-size: $font-size;

}

@mixin make-badge($name, $color) {

.badge-#{$name} {
  background-color: $color !important;
  color: set-notification-text-color($color) !important;
}

}

// Make input @mixin make-input($margin-bottom, $label-font-size, $label-active-font-size, $top, $prefix-font-size, $margin-left, $width, $margin-left-2) {

.validate {
  margin-bottom: $margin-bottom;
}

label {
  font-size: $label-font-size;

  &.active {
    font-size: $label-active-font-size;
  }
}

.prefix {
  top: $top;
  font-size: $prefix-font-size;

  ~input,
  ~textarea {
    margin-left: $margin-left;
    width: $width;
  }

  ~label {
    margin-left: $margin-left;
  }

  ~.form-text {
    margin-left: $margin-left-2;
  }
}

}

// Make navbar @mixin make-navbar($color-0, $background-image, $color, $color-2, $color-3) {

.navbar-nav {
  .nav-item {
    .nav-link {
      &.disbled {
        color: $color-0;

        &:hover {
          color: $color-0;
        }
      }
    }
  }
}

.navbar-toggler-icon {
  background-image: $background-image;
  cursor: pointer;
}

.breadcrumb,
.navbar-nav {
  .nav-item {
    .nav-link {
      color: $color;
      transition: $navbar-nav-transition;

      &:hover {
        color: $color-2;
      }
    }

    &.active>.nav-link {
      background-color: $color-3;

      &:hover {
        color: $color;
      }
    }
  }
}

.navbar-toggler {
  color: $color;
}

form {
  .md-form {
    input {
      border-bottom: 1px solid $color;

      &:focus:not([readonly]) {
        border-color: $input-md-focus-color;
      }
    }

    .form-control {
      color: $color;

      @include placeholder {
        color: $color;
        font-weight: $navbar-font-weight;
      }
    }
  }
}

}

// Make floating button @mixin make-btn-floating($width, $height, $font-size, $line-height) {

width: $width;
height: $height;

i {
  font-size: $font-size;
  line-height: $line-height;
}

}

// Keyframes @mixin keyframes($animation-name) {

@keyframes #{$animation-name} {
  @content;
}

}

// Scroll bar and scroll spy width and height @mixin scroll-width($scrollbar-width) {

width: $scrollbar-width;

}

@mixin scroll-height($scrollbar-height) {

height: $scrollbar-height;

}

// Scroll spy font-weight @mixin scrollspy-font-weight($scrollspy-font-weight) {

font-weight: $scrollspy-font-weight;

}

// Switch width and height @mixin switch-width-height($switchWidth, $switchHeight) {

width: $switchWidth;
height: $switchHeight;

}

// Make Box-shadows @mixin box-shadows($shadow…) {

box-shadow: $shadow;

}

// Make Transition @mixin transition-main($transition…) {

transition: $transition;

}

// Make border-radius scrollspy @mixin scrollspy-border-radius($scrollspy-radius) {

border-radius: $scrollspy-radius;

}

// Make border-radius scrollspy 4rows @mixin scrollspy-border-radius-4rows($top-left, $top-right, $bottom-right, $bottom-left) {

border-radius: $top-left $top-right $bottom-right $bottom-left;

}

//Make animation for progresss @mixin progress-animation-default($animation…) {

animation: $animation;

}

//Make transform @mixin transform($transform…) {

transform: $transform;

}