// 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;
}