:host { display: block; width: 100%; }
.mini-header { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: var(--fds-spacing-100); background: transparent; box-sizing: border-box; }
.header-left, .header-right { width: 96px; display: grid; grid-template-columns: repeat(2, 48px); place-items: center; box-sizing: border-box; }
.header-left > :only-child { grid-column: 1 / 2; justify-self: center; }
.header-right > :only-child { grid-column: 2 / 3; justify-self: center; }
.header-left > *, .header-right > * { width: 48px; max-width: 48px; min-width: 48px; height: 48px; align-items: center; justify-content: center; }
.header-center { flex: 1 1 0%; display: flex; justify-content: center; align-items: center; text-align: center; }
.center-slot { width: 48px; min-width: 48px; max-width: 48px; display: flex; align-items: center; justify-content: center; }
:host([theme="on-surface"]) { background-color: var(--fds-surface); }
:host([theme="on-alternate-surface"]) { background-color: var(--fds-alternate-surface); }
:host([theme="on-header"]) { background-color: var(--fds-primary); }