@use 'sass:map';

@include typography-basics;

$initial-bg: $body-secondary-color !default;
$initial-color: color-contrast($initial-bg);

.initial {
  --initial-color: #{$initial-color};
  --initial-bg: #{$initial-bg};
  --initial-font-size: 75cqw;
  --initial-font-weight: #{$headings-font-weight};
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  font-weight: var(--initial-font-weight);
  color: var(--initial-color);
  background-color: var(--initial-bg);

  > * {
    font-size: var(--initial-font-size);
  }
}
