@import './../../../styles/_base';

$color-bar: $color-primary;
$color-value: $color-grey;
$color-inset-background: $color-off-white;
$inner-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

ngx-progress-bar {
  display: block;
  --color-bar: #{$color-bar};
  --color-value: #{$color-value};
  --color-inset-background: #{$color-inset-background};
  --inner-shadow: #{$inner-shadow};
}

.ngx-progress-bar {
  width: 100%;
  height: 20px;
  background: $color-inset-background;
  background: var(--color-inset-background);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: $inner-shadow;
  box-shadow: var(--inner-shadow);
  padding: 2px;
  margin-bottom: 4px;

  &__inner {
    width: 100%;
    height: 100%;
    background: $color-bar;
    background: var(--color-bar);
    position: absolute;
    top: 0;
    left: -100%;
    text-align: center;
    line-height: 35px;
    font-size: 1em;
    will-change: transform;
    transition: transform 100ms ease-in;
  }

  &__value {
    color: $color-value;
    color: var(--color-value);
    z-index: 2;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: -1px;
  }
}
