// Mixins // Avatar mixin @mixin avatar-base($size: $unit-8) {

font-size: $size / 2;
height: $size;
width: $size;

}

// Background color utility mixin @mixin bg-color-variant($name: “.bg-primary”, $color: $primary-color) {

#{$name} {
  background: $color;
}

}

// Button variant mixin @mixin button-variant($color: $primary-color) {

background: $color;
border-color: darken($color, 3%);
color: $light-color;
&:focus {
  @include control-shadow($color);
}
&:focus,
&:hover {
  background: darken($color, 2%);
  border-color: darken($color, 5%);
  color: $light-color;
}
&:active,
&.active {
  background: darken($color, 7%);
  border-color: darken($color, 10%);
  color: $light-color;
}
&.loading {
  &::after {
    border-bottom-color: $light-color;
    border-left-color: $light-color;
  }
}

}

@mixin button-outline-variant($color: $primary-color) {

background: $light-color;
border-color: $color;
color: $color;
&:focus {
  @include control-shadow($color);
}
&:focus,
&:hover {
  background: lighten($color, 50%);
  border-color: darken($color, 2%);
  color: $color;
}
&:active,
&.active {
  background: $color;
  border-color: darken($color, 5%);
  color: $light-color;
}
&.loading {
  &::after {
    border-bottom-color: $color;
    border-left-color: $color;
  }
}

}

// Clearfix mixin @mixin clearfix() {

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

}

// Component focus shadow @mixin control-shadow($color: $primary-color) {

box-shadow: 0 0 0 .1rem rgba($color, .2);

}

// Component transition @mixin control-transition() {

transition: all .2s ease;

}

// Label base style @mixin label-base() {

border-radius: $border-radius;
line-height: 1.2;
padding: .1rem .15rem;

}

@mixin label-variant($color: $light-color, $bg-color: $primary-color) {

background: $bg-color;
color: $color;

}

// Margin utility mixin @mixin margin-variant($id: 1, $size: $unit-1) {

.m-#{$id} {
  margin: $size;
}
.mb-#{$id} {
  margin-bottom: $size;
}
.ml-#{$id} {
  margin-left: $size;
}
.mr-#{$id} {
  margin-right: $size;
}
.mt-#{$id} {
  margin-top: $size;
}
.mx-#{$id} {
  margin-left: $size;
  margin-right: $size;
}
.my-#{$id} {
  margin-bottom: $size;
  margin-top: $size;
}

}

// Padding utility mixin @mixin padding-variant($id: 1, $size: $unit-1) {

.p-#{$id} {
  padding: $size;
}
.pb-#{$id} {
  padding-bottom: $size;
}
.pl-#{$id} {
  padding-left: $size;
}
.pr-#{$id} {
  padding-right: $size;
}
.pt-#{$id} {
  padding-top: $size;
}
.px-#{$id} {
  padding-left: $size;
  padding-right: $size;
}
.py-#{$id} {
  padding-bottom: $size;
  padding-top: $size;
}

}

// Shadow mixin @mixin shadow-variant($offset) {

box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);

}

// Text color utility mixin @mixin text-color-variant($name: “.text-primary”, $color: $primary-color) {

#{$name} {
  color: $color;
}

a#{$name} {
  &:focus,
  &:hover {
    color: darken($color, 5%);
  }
}

}

// Text Ellipsis @mixin text-ellipsis() {

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

// Toast variant mixin @mixin toast-variant($color: $dark-color) {

background: rgba($color, .9);
border-color: $color;

}