@use 'sass:map';
@use '../../../mx-core/src/base/colors';

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

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

  .mx-usage-bar {
    --mx-usage-bar-primary: #{map.get($current-theme, primary)};
    --mx-usage-bar-secondary-container: #{map.get($current-theme, secondaryContainer)};

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

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

    &__segment:not(:last-child) {
      border-right-color: map.get($current-theme, surface);
    }
  }
}