libs/barista-components/progress-bar/src/progress-bar.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/interactive-common';

:host {
  display: block;
  box-sizing: border-box;
  position: relative;
}

:host-context(.cdk-focused.cdk-keyboard-focused) :host,
:host-context(.cdk-focused.cdk-program-focused) :host {
  outline: none;

  @include dt-focus-style();
}

// Bar styling.
.dt-progress-bar-progresswrapper {
  position: relative;
  height: 8px;
  background-color: $gray-200;
}

.dt-progress-bar-progress {
  transition: width ease-in-out 350ms;
  position: absolute;
  left: 0;
  top: 0;
  height: 8px;
}

// Progress description.
.dt-progress-bar-descriptionwrapper {
  width: 100%;
  margin-bottom: 8px;
}

// clearfix for floating description elements.
.dt-progress-bar-descriptionwrapper::after {
  content: ' ';
  display: table;
  width: 100%;
}

::ng-deep .dt-progress-bar-count {
  float: right;
  white-space: nowrap;
}

// Styles to right align the progressbar.
:host.dt-progress-bar-end .dt-progress-bar-progress {
  left: auto;
  right: 0;
}

@import './progress-bar-theme';
