.root {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: var(--app-viewport-height, 100dvh);
  min-width: 0;
  flex-direction: column;
  box-sizing: border-box;
  color: var(--color-text-foreground, #171717);
  overflow: hidden;
}

.root[data-scrollable="true"] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.padded {
  padding:
    calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
    calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
    calc(var(--page-padding-y, 18px) + var(--app-safe-bottom, 0px))
    calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
}

.header,
.footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
}

.body[data-scrollable="true"] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.footer {
  padding-bottom: var(--app-safe-bottom, 0px);
}
