.activeUnit() {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;

  &::after {
    display: none;
  }
}

.split-line() {
  &::after {
    position: absolute;
    right: 0;
    width: 1px;
    height: 16px;
    background: #fff;
    content: '';
  }
}

.resource-progress-container {
  position: relative;
  min-width: 90px;

  .resource-progress {
    align-items: center;
    width: 100%;

    .unit {
      display: inline-block;
      width: 10%;
      height: 16px;
    }

    & > .unit {
      position: relative;
      .split-line();

      &:last-child::after {
        display: none;
      }
    }

    .unit-active {
      position: relative;

      &::before {
        content: '';
        .activeUnit();
      }
    }

    .unit-percent {
      position: relative;
      display: inline-block;
      width: 10%;
      .split-line();
    }
  }

  .resource-vertical {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.resource-horizontal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .resource-progress-unit {
    height: 16px;
    margin-left: 12px;
    line-height: 16px;
    white-space: nowrap;
  }
}

.resource-vertical {
  color: rgba(0, 0, 0, 0.65);
}
