@import '../index.less';
@btri-progress: ~'@{ant-prefix}-btri-progress';
@btri-progress-box: ~'@{ant-prefix}-btri-progress-box';

.@{btri-progress} {
  &-circle-info {
    display: flex;
    justify-content: center;
    font-size: var(--h1-font-size);
    color: var(--title-font);
    font-weight: 600;
    .unit {
      font-size: var(--body-font-size);
      color: var(--body-font);
      align-self: flex-end;
      margin-left: 2px;
      font-weight: 400;
    }
    &.@{btri-progress}-error {
      color: var(--red-6);
    }
    &.@{btri-progress}-alarm {
      color: var(--orange-6);
    }
    &.@{btri-progress}-success {
      color: var(--green-6);
    }
  }
  &-info {
    &.@{btri-progress}-inner {
      z-index: 999;
      line-height: 16px;
      position: absolute;
      top: 5px;
    }
    &.@{btri-progress}-success {
      font-size: 16px;
      color: var(--green-6);
    }
    &.@{btri-progress}-error {
      font-size: 16px;
      color: var(--red-6);
    }
    &.@{btri-progress}-alarm {
      font-size: 16px;
      color: var(--orange-6);
    }
  }
}

.@{btri-progress-box} {
  display: flex;
  align-items: center;
  &.@{btri-progress}-success {
    .@{ant-prefix}-btri-progress-info {
      color: var(--body-font);
      .@{ant-prefix}-btri-icon-box {
        color: var(--green-6);
      }
    }
  }
  &.@{btri-progress}-inner {
    .@{ant-prefix}-progress-outer {
      line-height: 10px;
      height: 16px;
      .@{ant-prefix}-progress-inner {
        background-color: var(--primary-1);
        .@{ant-prefix}-progress-bg {
          height: 16px !important;
        }
      }
    }
  }

  &.@{ant-prefix}-progress-circle.@{btri-progress}-small {
    .@{btri-progress}-circle-info {
      font-size: var(--h2-font-size);
    }
    .@{ant-prefix}-progress-inner {
      height: 80px !important;
      width: 80px !important;
    }
  }
}