:root {
  --wg-skeleton-stack-gap: 12px;
  --wg-skeleton-grid-gap: 16px;
  --wg-skeleton-grid-min-column: 280px;
}

[data-wg-skeleton-loading] > :not(wg-skeleton) {
  visibility: hidden;
  pointer-events: none;
}

[data-wg-skeleton-loading] > wg-skeleton {
  box-sizing: border-box;
  width: 100%;
  padding: inherit;
  pointer-events: none;
}

[data-wg-skeleton-loading][data-wg-skeleton-layout='stack'] {
  min-height: calc(
    var(--wg-skeleton-item-height, 14px) * var(--wg-skeleton-count, 1) + var(--wg-skeleton-gap, var(--wg-skeleton-stack-gap)) *
      max(0, var(--wg-skeleton-count, 1) - 1)
  );
}

[data-wg-skeleton-loading][data-wg-skeleton-layout='grid'] {
  container-type: inline-size;
  min-height: var(--wg-skeleton-item-height, 180px);
}

[data-wg-skeleton-loading][data-wg-skeleton-layout='grid'] > wg-skeleton {
  grid-column: 1 / -1;
}

@container (max-width: calc(var(--wg-skeleton-grid-min-column, 280px) * 2 + var(--wg-skeleton-gap, var(--wg-skeleton-grid-gap)))) {
  [data-wg-skeleton-loading][data-wg-skeleton-layout='grid'] {
    min-height: calc(
      var(--wg-skeleton-item-height, 180px) * var(--wg-skeleton-count, 1) + var(--wg-skeleton-gap, var(--wg-skeleton-grid-gap)) *
        max(0, var(--wg-skeleton-count, 1) - 1)
    );
  }
}