@import '../custom.less';
@import './vars.less';

@statistic-item-prefix-cls: ~'@{css-prefix}statistic';

.@{statistic-item-prefix-cls} {
  .inject-Statistic-vars();

  width: 100%;

  &__title {
    font-size: var(--tv-Statistic-font-size);
    color: var(--tv-Statistic-font-color);
    font-weight: var(--tv-Statistic-title-font-weight);
    line-height: var(--tv-Statistic-title-line-height);
    margin-bottom: var(--tv-Statistic-title-margin-bottom);
  }

  &__slots {
    font-weight: var(--tv-Statistic-font-weight);
    font-size: var(--tv-Statistic-title-font-size);
    color: var(--tv-Statistic-font-color);
    display: flex;
    align-items: baseline;
  }

  &__prefix {
    font-weight: var(--tv-Statistic-prefix-font-weight);
    font-size: var(--tv-Statistic-font-size);
  }

  &__description {
    font-size: var(--tv-Statistic-description-font-size);
    font-weight: var(--tv-Statistic-description-font-weight);
  }

  &__suffix {
    margin-left: 4px;
    font-size: var(--tv-Statistic-suffix-font-size);
    font-weight: var(--tv-Statistic-suffix-font-weight);
  }

  &__description-margin {
    margin-bottom: var(--tv-Statistic-description-margin-bottom);
    margin-top: -8px;
  }
}