@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./progress-bar.common.scss";

// Ionic Progress bar
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-neutral-subtle-default};
  --progress-background: #{globals.ion-color(primary, base)};

  height: globals.$ion-scale-100;
}

// Progress Bar Shapes
// -------------------------------------------------------------------------------

:host(.progress-bar-shape-round) {
  @include globals.border-radius(globals.$ion-round-xs);
}

:host(.progress-bar-shape-rectangular) {
  @include globals.border-radius(globals.$ion-rectangular-xs);
}

// Progress Bar: Color
// ------------------------------------------------------------------------

:host(.ion-color) {
  .progress,
  .progress-indeterminate {
    background: #{globals.current-color(base)};
  }
}

:host(.ion-color) .buffer-circles {
  background-image: radial-gradient(
    ellipse at center,
    #{globals.current-color(base, 0.3)} 0%,
    #{globals.current-color(base, 0.3)} 30%,
    transparent 30%
  );
}