.swatch {
    padding: var(--spacing-lg);
}

.swatch__neutral-100 {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
}
.swatch__neutral-200 {
  background-color: var(--neutral-200);
  color: var(--neutral-900);
}
.swatch__neutral-300 {
  background-color: var(--neutral-300);
  color: var(--neutral-900);
}
.swatch__neutral-400 {
  background-color: var(--neutral-400);
  color: var(--neutral-900);
}
.swatch__neutral-500 {
  background-color: var(--neutral-500);
  color: var(--neutral-900);
}
.swatch__neutral-600 {
  background-color: var(--neutral-600);
  color: var(--neutral-100);
}
.swatch__neutral-700 {
  background-color: var(--neutral-700);
  color: var(--neutral-100);
}
.swatch__neutral-800 {
  background-color: var(--neutral-800);
  color: var(--neutral-100);
}
.swatch__neutral-900 {
  background-color: var(--neutral-900);
  color: var(--neutral-100);
}

.swatch__primary-100 {
  background-color: var(--primary-100);
  color: var(--primary-900);
}
.swatch__primary-300 {
  background-color: var(--primary-300);
  color: var(--primary-900);
}
.swatch__primary-500 {
  background-color: var(--primary-500);
  color: var(--primary-100);
}
.swatch__primary-700 {
  background-color: var(--primary-700);
  color: var(--primary-100);
}
.swatch__primary-900 {
  background-color: var(--primary-900);
  color: var(--primary-100);
}

.swatch__accent-100 {
  background-color: var(--accent-100);
  color: var(--accent-900);
}
.swatch__accent-300 {
  background-color: var(--accent-300);
  color: var(--accent-900);
}
.swatch__accent-500 {
  background-color: var(--accent-500);
  color: var(--accent-900);
}
.swatch__accent-700 {
  background-color: var(--accent-700);
  color: var(--accent-100);
}
.swatch__accent-900 {
  background-color: var(--accent-900);
  color: var(--accent-100);
}

.swatch__warning-100 {
  background-color: var(--warning-100);
  color: var(--warning-900);
}
.swatch__warning-300 {
  background-color: var(--warning-300);
  color: var(--warning-900);
}
.swatch__warning-500 {
  background-color: var(--warning-500);
  color: var(--warning-900);
}
.swatch__warning-700 {
  background-color: var(--warning-700);
  color: var(--warning-100);
}
.swatch__warning-900 {
  background-color: var(--warning-900);
  color: var(--warning-100);
}

.swatch__primary-component {
    background-color: var(--color-component-primary-background);
    color: var(--color-component-primary-text);
    font: var(--typography-bold);
}

.swatch__primary-container {
    background-color: var(--color-container-primary-background);
    color: var(--color-container-primary-text);
}

.swatch__secondary-component {
    background-color: var(--color-component-secondary-background);
    color: var(--color-component-secondary-text);
    font: var(--typography-bold);
}

.swatch__secondary-container {
    background-color: var(--color-container-secondary-background);
    color: var(--color-container-secondary-text);
}

.swatch__accent-component {
    background-color: var(--color-component-accent-background);
    color: var(--color-component-accent-text);
    font: var(--typography-bold);
}

.swatch__accent-container {
    background-color: var(--color-container-accent-background);
    color: var(--color-container-accent-text);
}

.swatch__warning-component {
    background-color: var(--color-component-warning-background);
    color: var(--color-component-warning-text);
    font: var(--typography-bold);
}

.swatch__warning-container {
    background-color: var(--color-container-warning-background);
    color: var(--color-container-warning-text);
}

.swatch__surface {
    background-color: var(--color-surface-background);
    color: var(--color-surface-text);
    font: var(--typography-body);
}
.swatch__surface-raised1 {
    background-color: var(--color-surface-raised1-background);
    color: var(--color-surface-raised1-text);
    font: var(--typography-body);
}
.swatch__surface-raised2 {
    background-color: var(--color-surface-raised2-background);
    color: var(--color-surface-raised2-text);
    font: var(--typography-body);
}
.swatch__surface-raised3 {
    background-color: var(--color-surface-raised3-background);
    color: var(--color-surface-raised3-text);
    font: var(--typography-body);
}
.swatch__surface-raised4 {
    background-color: var(--color-surface-raised4-background);
    color: var(--color-surface-raised4-text);
    font: var(--typography-body);
}
.swatch__surface-raised5 {
    background-color: var(--color-surface-raised5-background);
    color: var(--color-surface-raised5-text);
    font: var(--typography-body);
}

.showcase__sidebars-page {
    height: 100%;

    > .layout-row {
        height: 100%;
        justify-content: space-between;
    }
}