@use '../core/style/spacing' as *;

$side-badge-border-width: 1px;
$side-badge-radius-standard: 12px;
$side-badge-radius-large: 14px;
$side-badge-min-width-large: 14px;

@mixin uxg-side-badge-base() {
  position: initial;
  border-style: solid;
  border-width: $side-badge-border-width;
  height: unset !important;
  width: unset !important;
  top: unset !important;
  right: unset !important;
  vertical-align: middle;
  margin: 0 $uxg-spacing-2;
}

.uxg-side-badge {
  display: flex;
  align-items: center;

  &.mat-badge-small.mat-badge-after span.mat-badge-content {
    @include uxg-side-badge-base();

    border-radius: $side-badge-radius-standard;
    padding: 0 $uxg-spacing-2;
  }

  &.mat-badge-medium.mat-badge-after span.mat-badge-content {
    @include uxg-side-badge-base();

    border-radius: $side-badge-radius-standard;
    padding: 2px 10px;
  }

  &.mat-badge-large.mat-badge-after span.mat-badge-content {
    @include uxg-side-badge-base();

    border-radius: $side-badge-radius-large;
    padding: 2px 12px;
    min-width: $side-badge-min-width-large;
  }
}