@use "../../styles/tokens" as t;
@use "../../styles/mixins" as m;

@include m.scoped {
  // The grey canvas behind a page that asks for one.
  .backdrop {
    position: fixed;
    inset: 0;
    background: t.$canvas;
  }

  .root {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--servv-page-width, 100%);
    height: var(--servv-page-height, 100%);
    min-height: 0;
    flex: 1 1 auto;
  }

  // Pages that do not frame themselves with <PageContent> keep the old gutter.
  .gutterLeft {
    padding-left: t.$space-8;
  }

  .gutterRight {
    padding-right: t.$space-8;
  }

  .spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: var(--servv-page-width, 100%);
    height: var(--servv-page-height, 100%);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }
}