body {
  padding: 0;
  margin: 0;
}

wa-page {
  margin: var(--wa-space-xs);
  margin-inline-start: 0;
  &::part(base),
  &::part(main),
  &::part(navigation),
  &::part(body) {
    gap: var(--wa-space-xs);
  }
}

:is([slot='banner'], [slot='header'], [slot='subheader'], [slot='footer'], [slot*='navigation']) {
  margin-inline-start: var(--wa-space-xs);
}

.slot-content[slot='banner'],
.slot-content[slot='header'],
.slot-content[slot='subheader'] {
  outline: 2px solid var(--wa-color-surface-default);
}

.slot-content {
  padding: var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  align-content: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  background: var(--wa-color-blue-80);
  color: var(--wa-color-blue-20);

  &[slot='banner'] {
    background: var(--wa-color-blue-50);
    color: white;
  }

  &[slot='header'] {
    background: var(--wa-color-blue-60);
    color: var(--wa-color-blue-10);
  }

  &[slot^='main'],
  &[slot=''] {
    background: var(--wa-color-gray-80);
    color: var(--wa-color-gray-20);
  }

  &[slot^='navigation'] {
    background: var(--wa-color-purple-80);
    color: var(--wa-color-purple-20);
  }

  strong {
    display: block;
  }

  &:not([slot='']) p {
    display: none;
  }
}
