@use 'sass:map';
@use '../base/colors';
@use '../base/typography';

$badge-circle-size: 6px;
$badge-number-size: 16px;

.mx-badge {
  position: relative;
  overflow: visible !important;

  .mx-badge-content {
    display: inline-block;
  }

  &.mx-badge-circle {
    .mx-badge-content {
      height: $badge-circle-size;
      width: $badge-circle-size;
      border-radius: $badge-circle-size;
    }
  }

  &.mx-badge-number {
    .mx-badge-content {
      @extend .gl-label-sm;
      border-radius: 100px;
      font-family: 'Roboto', 'system', sans-serif;
      height: $badge-number-size;
      text-align: center;
    }
  }

  &.mx-badge-single-number {
    .mx-badge-content {
      width: $badge-number-size;
    }
  }

  &.mx-badge-overflow-number {
    .mx-badge-content {
      padding: 0 4px;
    }
  }

  &.mx-badge-absolute {
    .mx-badge-content {
      position: absolute;
    }

    &.mx-badge-circle {
      .mx-badge-content {
        top: 0;
        right: 0;
      }
    }

    &.mx-badge-number {
      .mx-badge-content {
        top: -4px;
        left: 12px;
      }
    }
  }

  &.mx-badge-behind {
    display: inline-flex;
    align-items: center;
    width: auto;
    .mx-badge-content {
      margin-left: 4px;
    }
  }

  &.mx-badge-hidden {
    .mx-badge-content {
      display: none;
    }
  }
}

@mixin mx-badge-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark == true {
    $current-theme: colors.$mx-dark;
  }

  .mx-badge {
    &--outline {
      .mx-badge-content {
        outline: 1px solid map.get($current-theme, onError);
      }
    }
  }

  .mx-badge-content {
    background-color: map.get($current-theme, error);
    color: map.get($current-theme, onError);
  }
}