// Mixins
// Avatar mixin
.avatar-base(@size: @unit-8) {
  font-size: @size / 2;
  height: @size;
  width: @size;
}

// Background color utility mixin
.bg-color-variant(@color: @primary-color) {
  background: @color;
}

// Button variant mixin
.button-variant(@color: @primary-color) {
  background: @color;
  border-color: darken(@color, 3%);
  color: @light-color;
  &:focus {
    .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;
    }
  }
}

.button-outline-variant(@color: @primary-color) {
  background: @light-color;
  border-color: @color;
  color: @color;
  &:focus {
    .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
.clearfix() {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

// Component focus shadow
.control-shadow(@color: @primary-color) {
  box-shadow: 0 0 0 .1rem fade(@color, 20%);
}

// Component transition
.control-transition() {
  transition: all .2s ease;
}

// Label base style
.label-base() {
  border-radius: @border-radius;
  line-height: 1;
  padding: .15rem .2rem;
}

.label-variant(@color: @light-color, @bg-color: @primary-color) {
  background: @bg-color;
  color: @color;
}

// Margin utility mixin
.margin-variant(@id: 1, @size: 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
.padding-variant(@id: 1, @size: 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
.shadow-variant(@offset) {
  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
}

// Text color utility mixin
.text-color-variant(@color: @primary-color) {
  color: @color;

  a& {
    &:focus,
    &:hover {
      color: darken(@color, 5%);
    }
  }
}

// Toast variant mixin
.toast-variant(@color: @dark-color) {
  background: fade(@color, 90%);
  border-color: @color;
}