application.css

html.spx-app {
  background: var(--spx-color-background);
  color: var(--spx-color-on-background);
  height: 100svh;
  width: 100svw;
  overflow-y: auto;
  overflow-x: hidden;
  font-family:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

  > body {
    margin: 0;

    main {
      width: var(--spx-main-content-width);
      max-width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 0.25rem;
    }
  }

  &:has(.spx-app-bar[spx-position='top']) {
    scroll-margin: var(--spx-app-bar-height);
    > body {
      padding-top: var(--spx-app-bar-height);
    }
  }

  &:has(.spx-app-bar[spx-position='bottom']) {
    > body {
      padding-bottom: var(--spx-app-bar-height);
    }
  }
}

@media only screen and (min-width: 960px) {
  html.spx-app {
    > body {
      main {
        padding: 1rem;
      }

      #root {
        width: 100%;
        transition-property: margin, width;
        transition-timing-function: var(--spx-sidebar-transition-timing-function);
        transition-duration: var(--spx-sidebar-transition-duration);
      }

      &:has(.spx-sidebar[data-open]:not([data-closing])[data-side='left']) {
        #root {
          width: calc(100% - var(--spx-sidebar-width-full));
          margin-left: var(--spx-sidebar-width-full);
        }
      }

      &:has(.spx-sidebar[data-open]:not([data-closing])[data-side='right']) {
        #root {
          width: calc(100% - var(--spx-sidebar-width-full));
          margin-right: var(--spx-sidebar-width-full);
        }
      }
    }
  }
}