@use 'sass:map';
@use 'sass:color';
@use '../style/theming';

// MARK: Variables
$linear-line-height: 4px;

// MARK: Mixin
@mixin core() {
  /// @dbx-utility loading-linear-done-padding
  /// @intent reserve the 4px height of a linear progress bar after it finishes — top-padding placeholder so siblings don't shift when the bar is hidden
  /// @role spacing
  .dbx-loading-linear-done-padding {
    padding-top: $linear-line-height;
  }

  /// @dbx-utility loading-progress-hint
  /// @intent 4px top padding for the hint message below a `<dbx-loading-progress>` indicator
  /// @role spacing
  .dbx-loading-progress-hint {
    padding-top: 4px;
  }

  $color-value: theming.$dbx-bg-color;

  .loading-progress-view-indicator {
    background: none !important; // no background color
  }

  // Colored progress indicator. `[dbxColor]` on the `<dbx-loading>` /
  // `<dbx-basic-loading>` / `<dbx-loading-progress>` host supplies the
  // `--dbx-bg-color-current` token + the `.dbx-color` marker; map the Material
  // progress indicator colors to it. Scoped on the marker (no inheritance-only
  // repaint). Without `[dbxColor]` the indicator keeps the Material default color.
  dbx-loading.dbx-color,
  dbx-basic-loading.dbx-color,
  dbx-loading-progress.dbx-color {
    --mat-progress-spinner-active-indicator-color: #{$color-value};
    --mat-progress-bar-active-indicator-color: #{$color-value};
  }
}

@mixin theme($theme-config) {
}