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

.SkeletonThumbnail {
  --pc-skeleton-thumbnail-extra-small-size: 24px;
  --pc-skeleton-thumbnail-small-size: 40px;
  --pc-skeleton-thumbnail-medium-size: 60px;
  --pc-skeleton-thumbnail-large-size: 80px;
  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;
  }
}

.sizeExtraSmall {
  height: var(--pc-skeleton-thumbnail-extra-small-size);
  width: var(--pc-skeleton-thumbnail-extra-small-size);
}

.sizeSmall {
  height: var(--pc-skeleton-thumbnail-small-size);
  width: var(--pc-skeleton-thumbnail-small-size);
}

.sizeMedium {
  height: var(--pc-skeleton-thumbnail-medium-size);
  width: var(--pc-skeleton-thumbnail-medium-size);
}

.sizeLarge {
  height: var(--pc-skeleton-thumbnail-large-size);
  width: var(--pc-skeleton-thumbnail-large-size);
}