@import '../../styles/common';

$skeleton-display-text-max-width: 120px;

@mixin skeleton-display-text-height {
  height: var(--pc-skeleton-display-text-height);

  @include when-typography-not-condensed {
    height: var(--pc-skeleton-display-text-height-not-condensed);
  }
}

.DisplayText {
  --pc-skeleton-display-text-height: var(--p-line-height-2);
  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-2);
  max-width: $skeleton-display-text-max-width;

  display: flex;
  background-color: var(--p-surface-neutral);
  border-radius: var(--p-border-radius-base);

  @media screen and (-ms-high-contrast: active) {
    background-color: grayText;
  }
}

.sizeSmall {
  --pc-skeleton-display-text-height: var(--p-line-height-3);
  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-4);
  @include skeleton-display-text-height;
}

.sizeMedium {
  --pc-skeleton-display-text-height: var(--p-line-height-4);
  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5);
  @include skeleton-display-text-height;
}

.sizeLarge {
  --pc-skeleton-display-text-height: var(--p-line-height-4);
  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-5);
  @include skeleton-display-text-height;
}

.sizeExtraLarge {
  --pc-skeleton-display-text-height: var(--p-line-height-6);
  --pc-skeleton-display-text-height-not-condensed: var(--p-line-height-7);
  @include skeleton-display-text-height;
}