@layer layout {
  .header {
    display: flex;
    width: 100%;
    left: 0;
    align-items: center;
    height: calc(var(--block-space) * 3.86);
    justify-content: center;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-border);

    .app-header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      padding-inline: var(--block-space-double);
      width: 100%;

      .app-header-left {

      }
      .app-header-center {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .app-header-right {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5em;
      }
    }

  }
}