/*  Copyright (C) Bitstem GmbH
 *  All rights reserved.
 *
 *  This source code is proprietary and confidential.
 *  Unauthorized copying, distribution, or disclosure of this file,
 *  in whole or in part, is strictly prohibited unless explicitly
 *  permitted in writing by Bitstem GmbH.
 *
 *  Author: Klaus Kuehnhammer <klaus@bitstem.com>
 */

@layer layout {
  .page {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    padding: var(--page-margin);
  }

  .page__panel {
    background-color: var(--color-panel);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--page-pad-x) var(--space-12);
    display: flex;
    flex-direction: column;
    margin: var(--space-4);
  }

  .page__header,
  .page__main,
  .page__outside,
  .page__footer {
    max-inline-size: var(--page-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .page__header {
    display: grid;
    grid-template-columns: 3.5rem 1fr 3.5rem;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4) var(--space-6);
    position: relative;
    margin-bottom: var(--space-6);
  }

  .page__header-start,
  .page__header-end {
    display: flex;
    align-items: center;
  }

  .page__header-start {
    justify-content: flex-start;
  }
  .page__header-end {
    justify-content: flex-end;
  }

  .page__header-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page__outside {
    padding-inline: var(--page-pad-x);
    padding-block: var(--space-8) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page__footer {
    padding-inline: var(--page-pad-x);
    padding-block: var(--space-8) var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-wide);
  }
}