/* ==========================================================================
   Icon Header Component
   Centered icon + title layout for page headers
   ========================================================================== */

.icon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon-header__icon {
  margin-block-end: var(--space-2);
  display: flex;
}

.icon-header__icon .material-symbols-outlined {
  font-size: var(--size-icon-xl);
}

.icon-header__title {
  margin: 0;
  font-family: var(--text-panel-header-family);
  font-size: var(--text-panel-header-size);
  font-weight: var(--text-panel-header-weight);
  line-height: var(--text-panel-header-line-height);
  color: var(--np-color-on-surface);
}