/* Type scale of each design system (igniteui-theming MCP create_typography), scoped to theme showcases,
   so a previewed theme uses its own typography next to the deck's global Material theme. Font family stays the deck's. */

.theme-showcase[data-theme="material"] {
  --ig-base-font-size: 16px;
  --ig-h1-font-size: 6rem;
  --ig-h1-font-weight: 300;
  --ig-h1-font-style: normal;
  --ig-h1-line-height: 7rem;
  --ig-h1-letter-spacing: -0.09375rem;
  --ig-h1-text-transform: none;
  --ig-h1-margin-top: 1.75rem;
  --ig-h1-margin-bottom: 3.5rem;
  --ig-h2-font-size: 3.75rem;
  --ig-h2-font-weight: 300;
  --ig-h2-font-style: normal;
  --ig-h2-line-height: 4.4375rem;
  --ig-h2-letter-spacing: -0.03125rem;
  --ig-h2-text-transform: none;
  --ig-h2-margin-top: 1.75rem;
  --ig-h2-margin-bottom: 1.75rem;
  --ig-h3-font-size: 3rem;
  --ig-h3-font-weight: 400;
  --ig-h3-font-style: normal;
  --ig-h3-line-height: 3.5625rem;
  --ig-h3-letter-spacing: 0;
  --ig-h3-text-transform: none;
  --ig-h3-margin-top: 1.75rem;
  --ig-h3-margin-bottom: 0;
  --ig-h4-font-size: 2.125rem;
  --ig-h4-font-weight: 400;
  --ig-h4-font-style: normal;
  --ig-h4-line-height: 2.5rem;
  --ig-h4-letter-spacing: 0.015625rem;
  --ig-h4-text-transform: none;
  --ig-h4-margin-top: 1.75rem;
  --ig-h4-margin-bottom: 0;
  --ig-h5-font-size: 1.5rem;
  --ig-h5-font-weight: 400;
  --ig-h5-font-style: normal;
  --ig-h5-line-height: 1.75rem;
  --ig-h5-letter-spacing: 0;
  --ig-h5-text-transform: none;
  --ig-h5-margin-top: 1.75rem;
  --ig-h5-margin-bottom: 0;
  --ig-h6-font-size: 1.25rem;
  --ig-h6-font-weight: 600;
  --ig-h6-font-style: normal;
  --ig-h6-line-height: 1.5rem;
  --ig-h6-letter-spacing: 0.009375rem;
  --ig-h6-text-transform: none;
  --ig-h6-margin-top: 0;
  --ig-h6-margin-bottom: 0;
  --ig-subtitle-1-font-size: 1rem;
  --ig-subtitle-1-font-weight: 400;
  --ig-subtitle-1-font-style: normal;
  --ig-subtitle-1-line-height: 1.5rem;
  --ig-subtitle-1-letter-spacing: 0.009375rem;
  --ig-subtitle-1-text-transform: none;
  --ig-subtitle-1-margin-top: 0;
  --ig-subtitle-1-margin-bottom: 0;
  --ig-subtitle-2-font-size: 0.875rem;
  --ig-subtitle-2-font-weight: 600;
  --ig-subtitle-2-font-style: normal;
  --ig-subtitle-2-line-height: 1.5rem;
  --ig-subtitle-2-letter-spacing: 0.00625rem;
  --ig-subtitle-2-text-transform: none;
  --ig-subtitle-2-margin-top: 0;
  --ig-subtitle-2-margin-bottom: 0;
  --ig-body-1-font-size: 1rem;
  --ig-body-1-font-weight: 400;
  --ig-body-1-font-style: normal;
  --ig-body-1-line-height: 1.75rem;
  --ig-body-1-letter-spacing: 0.03125rem;
  --ig-body-1-text-transform: none;
  --ig-body-1-margin-top: 1.75rem;
  --ig-body-1-margin-bottom: 1rem;
  --ig-body-2-font-size: 0.875rem;
  --ig-body-2-font-weight: 400;
  --ig-body-2-font-style: normal;
  --ig-body-2-line-height: 1.25rem;
  --ig-body-2-letter-spacing: 0.015625rem;
  --ig-body-2-text-transform: none;
  --ig-body-2-margin-top: 0;
  --ig-body-2-margin-bottom: 0;
  --ig-button-font-size: 0.875rem;
  --ig-button-font-weight: 600;
  --ig-button-font-style: normal;
  --ig-button-line-height: 1rem;
  --ig-button-letter-spacing: 0.046875rem;
  --ig-button-text-transform: uppercase;
  --ig-button-margin-top: 0;
  --ig-button-margin-bottom: 0;
  --ig-caption-font-size: 0.75rem;
  --ig-caption-font-weight: 400;
  --ig-caption-font-style: normal;
  --ig-caption-line-height: 1rem;
  --ig-caption-letter-spacing: 0.025rem;
  --ig-caption-text-transform: none;
  --ig-caption-margin-top: 0;
  --ig-caption-margin-bottom: 0;
  --ig-overline-font-size: 0.625rem;
  --ig-overline-font-weight: 400;
  --ig-overline-font-style: normal;
  --ig-overline-line-height: 1rem;
  --ig-overline-letter-spacing: 0.09375rem;
  --ig-overline-text-transform: uppercase;
  --ig-overline-margin-top: 0;
  --ig-overline-margin-bottom: 0;
}

.theme-showcase[data-theme="bootstrap"] {
  --ig-base-font-size: 16px;
  --ig-h1-font-size: 2.5rem;
  --ig-h1-font-weight: 500;
  --ig-h1-font-style: normal;
  --ig-h1-line-height: 3rem;
  --ig-h1-letter-spacing: -0.09375rem;
  --ig-h1-text-transform: none;
  --ig-h1-margin-top: 0;
  --ig-h1-margin-bottom: 0.5rem;
  --ig-h2-font-size: 2rem;
  --ig-h2-font-weight: 500;
  --ig-h2-font-style: normal;
  --ig-h2-line-height: 2.4rem;
  --ig-h2-letter-spacing: normal;
  --ig-h2-text-transform: none;
  --ig-h2-margin-top: 0;
  --ig-h2-margin-bottom: 0.5rem;
  --ig-h3-font-size: 1.75rem;
  --ig-h3-font-weight: 500;
  --ig-h3-font-style: normal;
  --ig-h3-line-height: 2.1rem;
  --ig-h3-letter-spacing: normal;
  --ig-h3-text-transform: none;
  --ig-h3-margin-top: 0;
  --ig-h3-margin-bottom: 0.5rem;
  --ig-h4-font-size: 1.5rem;
  --ig-h4-font-weight: 500;
  --ig-h4-font-style: normal;
  --ig-h4-line-height: 1.8rem;
  --ig-h4-letter-spacing: normal;
  --ig-h4-text-transform: none;
  --ig-h4-margin-top: 0;
  --ig-h4-margin-bottom: 0.5rem;
  --ig-h5-font-size: 1.25rem;
  --ig-h5-font-weight: 500;
  --ig-h5-font-style: normal;
  --ig-h5-line-height: 1.5rem;
  --ig-h5-letter-spacing: normal;
  --ig-h5-text-transform: none;
  --ig-h5-margin-top: 0;
  --ig-h5-margin-bottom: 0.5rem;
  --ig-h6-font-size: 1rem;
  --ig-h6-font-weight: 500;
  --ig-h6-font-style: normal;
  --ig-h6-line-height: 1.2rem;
  --ig-h6-letter-spacing: normal;
  --ig-h6-text-transform: none;
  --ig-h6-margin-top: 0;
  --ig-h6-margin-bottom: 0.5rem;
  --ig-subtitle-1-font-size: 1rem;
  --ig-subtitle-1-font-weight: 700;
  --ig-subtitle-1-font-style: normal;
  --ig-subtitle-1-line-height: 1.5rem;
  --ig-subtitle-1-letter-spacing: normal;
  --ig-subtitle-1-text-transform: none;
  --ig-subtitle-1-margin-top: 0;
  --ig-subtitle-1-margin-bottom: 0;
  --ig-subtitle-2-font-size: 0.875rem;
  --ig-subtitle-2-font-weight: 700;
  --ig-subtitle-2-font-style: normal;
  --ig-subtitle-2-line-height: 1.5rem;
  --ig-subtitle-2-letter-spacing: normal;
  --ig-subtitle-2-text-transform: none;
  --ig-subtitle-2-margin-top: 0;
  --ig-subtitle-2-margin-bottom: 0;
  --ig-body-1-font-size: 1rem;
  --ig-body-1-font-weight: 400;
  --ig-body-1-font-style: normal;
  --ig-body-1-line-height: 1.5rem;
  --ig-body-1-letter-spacing: normal;
  --ig-body-1-text-transform: none;
  --ig-body-1-margin-top: 0;
  --ig-body-1-margin-bottom: 0;
  --ig-body-2-font-size: 0.875rem;
  --ig-body-2-font-weight: 400;
  --ig-body-2-font-style: normal;
  --ig-body-2-line-height: 1.3125rem;
  --ig-body-2-letter-spacing: normal;
  --ig-body-2-text-transform: none;
  --ig-body-2-margin-top: 0;
  --ig-body-2-margin-bottom: 0;
  --ig-button-font-size: 1rem;
  --ig-button-font-weight: 400;
  --ig-button-font-style: normal;
  --ig-button-line-height: 1.5rem;
  --ig-button-letter-spacing: normal;
  --ig-button-text-transform: none;
  --ig-button-margin-top: 0;
  --ig-button-margin-bottom: 0;
  --ig-caption-font-size: 0.75rem;
  --ig-caption-font-weight: 400;
  --ig-caption-font-style: normal;
  --ig-caption-line-height: 1rem;
  --ig-caption-letter-spacing: normal;
  --ig-caption-text-transform: none;
  --ig-caption-margin-top: 0;
  --ig-caption-margin-bottom: 0;
  --ig-overline-font-size: 0.625rem;
  --ig-overline-font-weight: 400;
  --ig-overline-font-style: normal;
  --ig-overline-line-height: 1rem;
  --ig-overline-letter-spacing: 0.09375rem;
  --ig-overline-text-transform: uppercase;
  --ig-overline-margin-top: 0;
  --ig-overline-margin-bottom: 0;
  --ig-calendar-labels-font-size: 0.8125rem;
  --ig-calendar-labels-font-weight: 400;
  --ig-calendar-labels-font-style: normal;
  --ig-calendar-labels-line-height: normal;
  --ig-calendar-labels-letter-spacing: normal;
  --ig-calendar-labels-text-transform: none;
  --ig-calendar-labels-margin-top: 0;
  --ig-calendar-labels-margin-bottom: 0;
}

.theme-showcase[data-theme="fluent"] {
  --ig-base-font-size: 16px;
  --ig-h1-font-size: 4.25rem;
  --ig-h1-font-weight: 400;
  --ig-h1-font-style: normal;
  --ig-h1-line-height: 4.75rem;
  --ig-h1-letter-spacing: normal;
  --ig-h1-text-transform: none;
  --ig-h1-margin-top: 0;
  --ig-h1-margin-bottom: 0;
  --ig-h2-font-size: 2.625rem;
  --ig-h2-font-weight: 400;
  --ig-h2-font-style: normal;
  --ig-h2-line-height: 3.25rem;
  --ig-h2-letter-spacing: normal;
  --ig-h2-text-transform: none;
  --ig-h2-margin-top: 0;
  --ig-h2-margin-bottom: 0;
  --ig-h3-font-size: 2rem;
  --ig-h3-font-weight: 400;
  --ig-h3-font-style: normal;
  --ig-h3-line-height: 2.5rem;
  --ig-h3-letter-spacing: normal;
  --ig-h3-text-transform: none;
  --ig-h3-margin-top: 0;
  --ig-h3-margin-bottom: 0;
  --ig-h4-font-size: 1.75rem;
  --ig-h4-font-weight: 400;
  --ig-h4-font-style: normal;
  --ig-h4-line-height: 2.25rem;
  --ig-h4-letter-spacing: normal;
  --ig-h4-text-transform: none;
  --ig-h4-margin-top: 0;
  --ig-h4-margin-bottom: 0;
  --ig-h5-font-size: 1.5rem;
  --ig-h5-font-weight: 400;
  --ig-h5-font-style: normal;
  --ig-h5-line-height: 2rem;
  --ig-h5-letter-spacing: normal;
  --ig-h5-text-transform: none;
  --ig-h5-margin-top: 0;
  --ig-h5-margin-bottom: 0;
  --ig-h6-font-size: 1.25rem;
  --ig-h6-font-weight: 400;
  --ig-h6-font-style: normal;
  --ig-h6-line-height: 1.75rem;
  --ig-h6-letter-spacing: normal;
  --ig-h6-text-transform: none;
  --ig-h6-margin-top: 0;
  --ig-h6-margin-bottom: 0;
  --ig-subtitle-1-font-size: 1.125rem;
  --ig-subtitle-1-font-weight: 400;
  --ig-subtitle-1-font-style: normal;
  --ig-subtitle-1-line-height: 1.5rem;
  --ig-subtitle-1-letter-spacing: normal;
  --ig-subtitle-1-text-transform: none;
  --ig-subtitle-1-margin-top: 0;
  --ig-subtitle-1-margin-bottom: 0;
  --ig-subtitle-2-font-size: 0.875rem;
  --ig-subtitle-2-font-weight: 700;
  --ig-subtitle-2-font-style: normal;
  --ig-subtitle-2-line-height: 1.25rem;
  --ig-subtitle-2-letter-spacing: normal;
  --ig-subtitle-2-text-transform: none;
  --ig-subtitle-2-margin-top: 0;
  --ig-subtitle-2-margin-bottom: 0;
  --ig-body-1-font-size: 1rem;
  --ig-body-1-font-weight: 400;
  --ig-body-1-font-style: normal;
  --ig-body-1-line-height: 1.375rem;
  --ig-body-1-letter-spacing: normal;
  --ig-body-1-text-transform: none;
  --ig-body-1-margin-top: 0;
  --ig-body-1-margin-bottom: 0;
  --ig-body-2-font-size: 0.875rem;
  --ig-body-2-font-weight: 400;
  --ig-body-2-font-style: normal;
  --ig-body-2-line-height: 1.25rem;
  --ig-body-2-letter-spacing: normal;
  --ig-body-2-text-transform: none;
  --ig-body-2-margin-top: 0;
  --ig-body-2-margin-bottom: 0;
  --ig-button-font-size: 0.875rem;
  --ig-button-font-weight: 600;
  --ig-button-font-style: normal;
  --ig-button-line-height: 0.875rem;
  --ig-button-letter-spacing: normal;
  --ig-button-text-transform: capitalize;
  --ig-button-margin-top: 0;
  --ig-button-margin-bottom: 0;
  --ig-caption-font-size: 0.75rem;
  --ig-caption-font-weight: 400;
  --ig-caption-font-style: normal;
  --ig-caption-line-height: 1rem;
  --ig-caption-letter-spacing: normal;
  --ig-caption-text-transform: none;
  --ig-caption-margin-top: 0;
  --ig-caption-margin-bottom: 0;
  --ig-overline-font-size: 0.625rem;
  --ig-overline-font-weight: 400;
  --ig-overline-font-style: normal;
  --ig-overline-line-height: 0.875rem;
  --ig-overline-letter-spacing: normal;
  --ig-overline-text-transform: uppercase;
  --ig-overline-margin-top: 0;
  --ig-overline-margin-bottom: 0;
}

.theme-showcase[data-theme="indigo"] {
  --ig-base-font-size: 16px;
  --ig-h1-font-size: 2.25rem;
  --ig-h1-font-weight: 300;
  --ig-h1-font-style: normal;
  --ig-h1-line-height: 2.625rem;
  --ig-h1-letter-spacing: 0;
  --ig-h1-text-transform: none;
  --ig-h1-margin-top: 0;
  --ig-h1-margin-bottom: 0;
  --ig-h2-font-size: 1.75rem;
  --ig-h2-font-weight: 400;
  --ig-h2-font-style: normal;
  --ig-h2-line-height: 2.25rem;
  --ig-h2-letter-spacing: 0;
  --ig-h2-text-transform: none;
  --ig-h2-margin-top: 0;
  --ig-h2-margin-bottom: 0;
  --ig-h3-font-size: 1.5rem;
  --ig-h3-font-weight: 400;
  --ig-h3-font-style: normal;
  --ig-h3-line-height: 2rem;
  --ig-h3-letter-spacing: 0;
  --ig-h3-text-transform: none;
  --ig-h3-margin-top: 0;
  --ig-h3-margin-bottom: 0;
  --ig-h4-font-size: 1.25rem;
  --ig-h4-font-weight: 600;
  --ig-h4-font-style: normal;
  --ig-h4-line-height: 1.625rem;
  --ig-h4-letter-spacing: 0;
  --ig-h4-text-transform: none;
  --ig-h4-margin-top: 0;
  --ig-h4-margin-bottom: 0;
  --ig-h5-font-size: 1rem;
  --ig-h5-font-weight: 600;
  --ig-h5-font-style: normal;
  --ig-h5-line-height: 1.375rem;
  --ig-h5-letter-spacing: 0;
  --ig-h5-text-transform: none;
  --ig-h5-margin-top: 0;
  --ig-h5-margin-bottom: 0;
  --ig-h6-font-size: 0.875rem;
  --ig-h6-font-weight: 600;
  --ig-h6-font-style: normal;
  --ig-h6-line-height: 1.25rem;
  --ig-h6-letter-spacing: 0;
  --ig-h6-text-transform: none;
  --ig-h6-margin-top: 0;
  --ig-h6-margin-bottom: 0;
  --ig-subtitle-1-font-size: 0.8125rem;
  --ig-subtitle-1-font-weight: 600;
  --ig-subtitle-1-font-style: normal;
  --ig-subtitle-1-line-height: 1.125rem;
  --ig-subtitle-1-letter-spacing: 0;
  --ig-subtitle-1-text-transform: none;
  --ig-subtitle-1-margin-top: 0;
  --ig-subtitle-1-margin-bottom: 0;
  --ig-subtitle-2-font-size: 0.75rem;
  --ig-subtitle-2-font-weight: 600;
  --ig-subtitle-2-font-style: normal;
  --ig-subtitle-2-line-height: 1rem;
  --ig-subtitle-2-letter-spacing: 0;
  --ig-subtitle-2-text-transform: none;
  --ig-subtitle-2-margin-top: 0;
  --ig-subtitle-2-margin-bottom: 0;
  --ig-body-1-font-size: 0.8125rem;
  --ig-body-1-font-weight: 400;
  --ig-body-1-font-style: normal;
  --ig-body-1-line-height: 1.125rem;
  --ig-body-1-letter-spacing: 0;
  --ig-body-1-text-transform: none;
  --ig-body-1-margin-top: 0;
  --ig-body-1-margin-bottom: 0;
  --ig-body-2-font-size: 0.75rem;
  --ig-body-2-font-weight: 400;
  --ig-body-2-font-style: normal;
  --ig-body-2-line-height: 1rem;
  --ig-body-2-letter-spacing: 0;
  --ig-body-2-text-transform: none;
  --ig-body-2-margin-top: 0;
  --ig-body-2-margin-bottom: 0;
  --ig-button-font-size: 0.6875rem;
  --ig-button-font-weight: 700;
  --ig-button-font-style: normal;
  --ig-button-line-height: 0.9375rem;
  --ig-button-letter-spacing: 0;
  --ig-button-text-transform: uppercase;
  --ig-button-margin-top: 0;
  --ig-button-margin-bottom: 0;
  --ig-caption-font-size: 0.6875rem;
  --ig-caption-font-weight: 400;
  --ig-caption-font-style: normal;
  --ig-caption-line-height: 0.9375rem;
  --ig-caption-letter-spacing: 0;
  --ig-caption-text-transform: normal;
  --ig-caption-margin-top: 0;
  --ig-caption-margin-bottom: 0;
  --ig-overline-font-size: 0.6875rem;
  --ig-overline-font-weight: 700;
  --ig-overline-font-style: normal;
  --ig-overline-line-height: 0.9375rem;
  --ig-overline-letter-spacing: 0;
  --ig-overline-text-transform: none;
  --ig-overline-margin-top: 0;
  --ig-overline-margin-bottom: 0;
  --ig-detail-1-font-size: 0.75rem;
  --ig-detail-1-font-weight: 400;
  --ig-detail-1-font-style: normal;
  --ig-detail-1-line-height: 1rem;
  --ig-detail-1-letter-spacing: 0;
  --ig-detail-1-text-transform: none;
  --ig-detail-1-margin-top: 0;
  --ig-detail-1-margin-bottom: 0;
  --ig-detail-2-font-size: 0.75rem;
  --ig-detail-2-font-weight: 600;
  --ig-detail-2-font-style: normal;
  --ig-detail-2-line-height: 1rem;
  --ig-detail-2-letter-spacing: 0;
  --ig-detail-2-text-transform: none;
  --ig-detail-2-margin-top: 0;
  --ig-detail-2-margin-bottom: 0;
}