/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

// The pulse animation lives in its own file; it emits the `@media (prefers-reduced-motion)` block and the
// keyframes, and shares no Sass with the rules below.
@use "animation";

// Sizes a block like a line of text: as tall as its font size, with the leading divided over both margins.
// A stack of these blocks occupies exactly as much space as the same number of lines of the mimicked text.
@mixin text-line($font-size, $line-height) {
  block-size: $font-size;
  margin-block: calc((#{$line-height} - 1) / 2 * #{$font-size});
}

.ams-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--ams-skeleton-gap);
}

.ams-skeleton__heading,
.ams-skeleton__paragraph,
.ams-skeleton__table {
  display: flex;
  flex-direction: column;
}

.ams-skeleton__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--ams-skeleton-list-gap);
}

.ams-skeleton__image,
.ams-skeleton__line,
.ams-skeleton__marker {
  background-color: var(--ams-skeleton-background-color);

  // A background set to a system colour remains visible in forced-colors mode.
  @media (forced-colors: active) {
    background-color: GrayText;
  }
}

.ams-skeleton__image {
  aspect-ratio: var(--ams-skeleton-image-aspect-ratio);
}

// A line’s size comes from the group it sits in, so one primitive serves every appearance.
.ams-skeleton__heading .ams-skeleton__line {
  @include text-line(var(--ams-skeleton-heading-font-size), var(--ams-skeleton-heading-line-height));
}

.ams-skeleton__list .ams-skeleton__line,
.ams-skeleton__paragraph .ams-skeleton__line,
.ams-skeleton__table .ams-skeleton__line {
  @include text-line(var(--ams-skeleton-line-font-size), var(--ams-skeleton-line-line-height));
}

.ams-skeleton__list-item {
  align-items: center;
  column-gap: var(--ams-skeleton-list-item-column-gap);
  display: flex;
  padding-inline-start: var(--ams-skeleton-list-item-padding-inline-start);
}

.ams-skeleton__marker {
  block-size: var(--ams-skeleton-list-item-marker-block-size);
  flex: none;
  inline-size: var(--ams-skeleton-list-item-marker-inline-size);
}

.ams-skeleton__table-row {
  border-block-end: var(--ams-skeleton-table-row-border-block-end);
  display: flex;
}

.ams-skeleton__table-cell {
  flex: 1;
  padding-block: var(--ams-skeleton-table-cell-padding-block);
  padding-inline: var(--ams-skeleton-table-cell-padding-inline);
}

// Line lengths vary per position, deterministically approximating the ragged shape of real content.

// The two alternating widths: a heading, paragraph, and list each alternate their lines between an
// odd-numbered and an even-numbered width. The shorter last-line and table rules that follow are more
// specific, so this section is ordered by ascending specificity to keep those overrides winning.
.ams-skeleton__heading .ams-skeleton__line:nth-child(odd) {
  inline-size: var(--ams-skeleton-heading-odd-inline-size);
}

.ams-skeleton__heading .ams-skeleton__line:nth-child(even) {
  inline-size: var(--ams-skeleton-heading-even-inline-size);
}

.ams-skeleton__paragraph .ams-skeleton__line:nth-child(odd) {
  inline-size: var(--ams-skeleton-paragraph-odd-inline-size);
}

.ams-skeleton__paragraph .ams-skeleton__line:nth-child(even) {
  inline-size: var(--ams-skeleton-paragraph-even-inline-size);
}

.ams-skeleton__list-item:nth-child(odd) .ams-skeleton__line {
  inline-size: var(--ams-skeleton-list-odd-inline-size);
}

.ams-skeleton__list-item:nth-child(even) .ams-skeleton__line {
  inline-size: var(--ams-skeleton-list-even-inline-size);
}

// The shorter last line of a heading, paragraph, or list, when it has more than one line. These two
// pseudo-classes outrank the single one above, so the last line overrides its alternating width.
.ams-skeleton__heading .ams-skeleton__line:last-child:not(:first-child) {
  inline-size: var(--ams-skeleton-heading-last-inline-size);
}

.ams-skeleton__paragraph .ams-skeleton__line:last-child:not(:first-child) {
  inline-size: var(--ams-skeleton-paragraph-last-inline-size);
}

.ams-skeleton__list-item:last-child:not(:first-child) .ams-skeleton__line {
  inline-size: var(--ams-skeleton-list-last-inline-size);
}

// A table alternates its cell lengths across the columns of each row, and flips the pattern on alternate
// rows so cells vary down a column too. A row of more than one cell ends on a shorter last cell. These
// selectors are the most specific, so they come last.
.ams-skeleton__table-row:nth-child(odd) .ams-skeleton__table-cell:nth-child(odd) .ams-skeleton__line,
.ams-skeleton__table-row:nth-child(even) .ams-skeleton__table-cell:nth-child(even) .ams-skeleton__line {
  inline-size: var(--ams-skeleton-table-odd-inline-size);
}

.ams-skeleton__table-row:nth-child(odd) .ams-skeleton__table-cell:nth-child(even) .ams-skeleton__line,
.ams-skeleton__table-row:nth-child(even) .ams-skeleton__table-cell:nth-child(odd) .ams-skeleton__line {
  inline-size: var(--ams-skeleton-table-even-inline-size);
}