@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./mixins/_logical-properties.less";

@progress-height: 2px;
@progress-pip-size: 8px;

.progress {
  height: @progress-height;
  margin-top: calc((var(--size-24) - @progress-height) / 2);
  margin-bottom: calc((var(--size-24) - @progress-height) / 2);
  background-color: var(--color-background-neutral);
  border-radius: calc(@progress-height / 2);
}

.progress-bar {
  .float(left);

  width: 0%;
  height: 100%;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: #fff;
  .text-align(right);

  background-color: var(--color-content-accent);
  transition: width 0.6s ease;

  &::after {
    content: "";
    .float(right);

    margin-top: @progress-pip-size / 2 + 1;
    .margin(right, @progress-pip-size / 2);

    width: @progress-pip-size;
    height: @progress-pip-size;
    background-color: inherit;
    border-radius: @progress-pip-size / 2;
  }

  &:first-child {
    border-top-left-radius: @progress-height / 2;
    border-bottom-left-radius: @progress-height / 2;
  }

  &:last-child {
    border-top-right-radius: @progress-height / 2;
    border-bottom-right-radius: @progress-height / 2;
  }
}

.progress-bar-primary {
  background-color: var(--color-content-primary);
}

.progress-bar-success {
  background-color: var(--color-content-positive);
}

.progress-bar-info {
  background-color: var(--color-content-accent);
}

.progress-bar-warning {
  background-color: var(--color-content-warning);
}

.progress-bar-danger {
  background-color: var(--color-content-negative);
}
