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

.mx-numeric-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;

  &__number {
    @extend .gl-display-sm;

    &--sm {
      @extend .gl-title-lg;
    }
  }

  &__title {
    @extend .gl-title-sm;

    &--sm {
      @extend .gl-label-sm;
    }
  }
}

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

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

  .mx-numeric-indicator__number {
    color: map.get($current-theme, onSurface);

    &--error {
      color: map.get($current-theme, error);
    }

    &--warning {
      color: map.get($current-theme, warning);
    }

    &--success {
      color: map.get($current-theme, success);
    }
  }

  .mx-numeric-indicator__title {
    color: map.get($current-theme, onSurfaceVariant);
  }
}