// Source mixin
@mixin make-container($padding-x: 20px) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

@mixin avatarSize($size: $avatar-size) {

  @each $size,
  $value in $avatar-size {
    .#{$size} {

      img,
      & {
        height: $value;
        width: $value;
      }
    }
  }
}

// Usage
.custom-container {
  @include make-container();
}

@mixin backgroundColor($hover: true, $dash: '--', $self: '') {
  &#{$dash}primary #{$self} {
    color: #fff;
    background-color: var(--bs-primary);

    @if ($hover) {
      &:hover {
        background-color: var(--bs-primary);
      }
    }
  }

  &#{$dash}secondary #{$self} {
    color: #fff;
    background-color: var(--bs-secondary);

    @if ($hover) {
      &:hover {
        background-color: var(--bs-secondary-hover);
      }
    }
  }

  &#{$dash}dark #{$self} {
    color: #fff;
    background-color: var(--bs-black);

    @if ($hover) {
      &:hover {
        background-color: #2f80ed;
      }
    }
  }

  &#{$dash}success #{$self} {
    color: #fff;
    background-color: var(--bs-success);

    @if ($hover) {
      &:hover {
        background-color: var(--bs-success-hover);
      }
    }
  }

  &#{$dash}warning #{$self} {
    color: #fff;
    background-color: var(--bs-warning);

    @if ($hover) {
      &:hover {
        background-color: var(--bs-warning-hover);
      }
    }
  }

  &#{$dash}danger #{$self} {
    color: #fff;
    background-color: var(--bs-danger);

    @if ($hover) {
      &:hover {
        background-color: var(--bs-danger-hover);
      }
    }
  }

  &#{$dash}white #{$self} {
    color: black;
    background-color: white;

    @if ($hover) {
      &:hover {
        background-color: #eceaea;
      }
    }
  }
}