$skeleton-display-text-max-width: rem(120px);

@mixin skeleton-display-text-height($size) {
  height: line-height($size);

  @include when-typography-not-condensed {
    height: line-height($size, large-screen);
  }
}

.DisplayText {
  max-width: $skeleton-display-text-max-width;

  @include skeleton-shimmer;
  @include skeleton-content;
}

.sizeSmall {
  @include skeleton-display-text-height('display-small');
}

.sizeMedium {
  @include skeleton-display-text-height('display-medium');
}

.sizeLarge {
  @include skeleton-display-text-height('display-large');
}

.sizeExtraLarge {
  @include skeleton-display-text-height('display-x-large');
}