@import './var.less';

.@{prefix}-progress {
  display: flex;
  align-items: center;

  &__outer,
  &__inner {
    height: 5px;
    border-radius: 5px;
  }

  &__outer {
    width: 100%;
    background-color: var(--background-gray);
    position: relative;
  }

  &__inner {
    position: absolute;
    width: 0;
    background-image: linear-gradient(137deg, #05c9fa 0%, #09f 100%);
    transition: width 0.85s;
  }

  &__text {
    margin-left: 4px;
    font-size: 12px;
    color: #878b99;
  }

  &__circle {
    color: var(--brand-standard);

    &-stroke {
      transform-origin: 28px 28px;
      transform: rotate(-90deg);
      transition: stroke-dasharray 300ms ease;
    }

    &-text {
      text-anchor: middle;
      dominant-baseline: middle;
      font-size: 12px;
      line-height: 1;
      fill: var(--text-primary);
    }
  }
}