@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  @include border-radius($border-radius);
  border: 0;
  font-size: $font-size;
  line-height: $line-height;
  padding: $padding-y $padding-x;

  &::before {
    @include border-radius($border-radius);
    font-size: $font-size;
    height: ($padding-y * 2) + ($font-size * $line-height);
    line-height: $line-height;
    padding: $padding-y 0;
    width: ($padding-y * 2) + ($font-size * $line-height);
  }

  span {
    margin-left: ($padding-y * 2) + ($font-size * $line-height);
  }

  &.icon {
    height: ($padding-y * 2) + ($font-size * $line-height);
    width: ($padding-y * 2) + ($font-size * $line-height);
  }
}

@mixin avatar($width, $status-width) {
  display: inline-block;
  position: relative;
  width: $width;

  .img-avatar {
    height: $width;
    width: $width;
  }

  .avatar-status {
    border: 1px solid $white;
    border-radius: 50em;
    bottom: 0;
    display: block;
    height: $status-width;
    position: absolute;
    right: 0;
    width: $status-width;
  }
}

@mixin borders($borders) {
  @each $border in $borders {
    $direction: nth($border, 1);
    @if $direction == 'all' {
      $size: map-get(map-get($borders, $direction), size);
      $style: map-get(map-get($borders, $direction), style);
      $color: map-get(map-get($borders, $direction), color);
      border: $size $style $color;
    } @else if $direction == 'top' {
      $size: map-get(map-get($borders, $direction), size);
      $style: map-get(map-get($borders, $direction), style);
      $color: map-get(map-get($borders, $direction), color);
      border-top: $size $style $color;
    } @else if $direction == 'right' {
      $size: map-get(map-get($borders, $direction), size);
      $style: map-get(map-get($borders, $direction), style);
      $color: map-get(map-get($borders, $direction), color);
      border-right: $size $style $color;
    } @else if $direction == 'bottom' {
      $size: map-get(map-get($borders, $direction), size);
      $style: map-get(map-get($borders, $direction), style);
      $color: map-get(map-get($borders, $direction), color);
      border-bottom: $size $style $color;
    } @else if $direction == 'left' {
      $size: map-get(map-get($borders, $direction), size);
      $style: map-get(map-get($borders, $direction), style);
      $color: map-get(map-get($borders, $direction), color);
      border-left: $size $style $color;
    }
  }
}

@mixin sidebar-width($borders, $width) {
  $sidebar-width: $width;

  @each $border in $borders {
    $direction: nth($border, 1);
    @if $direction == 'all' {
      $size: map-get(map-get($borders, $direction), size);
      $sidebar-width: ($sidebar-width - (2 * $size));
    } @else if $direction == 'right' {
      $size: map-get(map-get($borders, $direction), size);
      $sidebar-width: $sidebar-width - $size;
    } @else if $direction == 'left' {
      $size: map-get(map-get($borders, $direction), size);
      $sidebar-width: $sidebar-width - $size;
    }
    width: $sidebar-width;
  }
}

@mixin bg-variant($parent, $color) {
  #{$parent} {
    @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
    background-color: $color !important;
    color: $white !important;
  }

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

@mixin card-accent-variant($color) {
  border-top-color: $color;
  border-top-width: 2px;
}