$padding-vertical-tiny: var(
  --wds-statistics-widget-padding-vertical-tiny,
  var(--wds-space-300)
);
$padding-vertical-large: var(
  --wds-statistics-widget-padding-vertical-large,
  var(--wds-space-500)
);
$padding-horizontal-tiny: var(
  --wds-statistics-widget-padding-horizontal-tiny,
  var(--wds-space-300)
);
$padding-horizontal-large: var(
  --wds-statistics-widget-padding-horizontal-large,
  var(--wds-space-300)
);

.statistics-widget {
  &__item--size-tiny {
    padding: $padding-vertical-tiny $padding-horizontal-tiny;
  }

  &__item--size-large {
    padding: $padding-vertical-large $padding-horizontal-large;
  }

  &__item--size-large:not(:first-child)::before {
    top: $padding-vertical-large;
    bottom: $padding-vertical-large;
  }

  &__item--size-tiny:not(:first-child)::before {
    top: $padding-vertical-tiny;
    bottom: $padding-vertical-tiny;
  }

  // repeated class required: __value is a Text root; without it Text's own state selectors outweigh this rule
  &__item#{&}__item--size-tiny &__value#{&}__value {
    font-family: var(
      --wds-statistics-widget-value-font-family-tiny,
      var(--wds-font-family-display)
    );
    font-size: var(
      --wds-statistics-widget-value-font-size-tiny,
      var(--wds-font-size-heading-2)
    );
    font-weight: var(
      --wds-statistics-widget-value-font-weight-tiny,
      var(--wds-font-weight-heading-2)
    );
    line-height: var(
      --wds-statistics-widget-value-font-line-height-tiny,
      var(--wds-font-line-height-heading-2)
    );
  }

  // repeated class required: __value is a Text root; without it Text's own state selectors outweigh this rule
  &__item#{&}__item--size-tiny &__value#{&}__value,
  &__item#{&}__item--size-large &__value#{&}__value {
    letter-spacing: var(--wds-statistics-widget-value-font-letter-spacing, -0.5px);
  }

  &__description {
    gap: var(
      --wds-statistics-widget-description-info-gap,
      var(--wds-space-50)
    );
  }

  // repeated class required: __description-text is a Text root; without it this no longer outranks Text's own state selectors
  &__item &__description &__description-text#{&}__description-text {
    font-size: var(
      --wds-statistics-widget-description-font-size,
      var(--wds-font-size-body-tiny)
    );
    line-height: var(
      --wds-statistics-widget-description-font-line-height,
      var(--wds-font-line-height-body-tiny)
    );
  }

  &__percentage {
    margin-top: var(
      --wds-statistics-widget-trend-space-top,
      var(--wds-space-0)
    );
  }
}