/*
  defines global page structure and looks

  page background and font
  utility classes
*/



@layer common-styling {

  /* page background and font
  ============================================================================ */

  .pos-app body {
    min-height: 100%;
    min-height: 100dvh;
    padding: var(--pos-padding-page);
    display: flex;
    flex-direction: column;

    background-color: var(--pos-color-page-background);
  }

  .pos-app {
    text-rendering: optimizeLegibility;
    font-family: var(--pos-font-default);
    color: var(--pos-color-content-text);
  }

  .pos-app ::selection {
    background-color: var(--pos-color-selection-background);

    color: var(--pos-color-selection-text);
  }


  /* utility classes
  ============================================================================ */
  .pos-text-end {
    text-align: end;
  }

  .pos-text-start {
    text-align: start;
  }

  .pos-text-center {
    text-align: center;
  }

}