@require "../stylus/index.styl";

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: var(--visible-height, 100dvh);
  background: yellow;
  overflow: hidden;
}

.top,
.bottom {
  background: green;
  flex: 0 0 auto; /* shrink to content */
  padding-left: var(--safe-left, -safe-left);
  padding-right: var(--safe-right, -safe-right);
}

.top {
  padding-top: var(--safe-top, -safe-top);
}

.middle {
  flex: 1 1 auto; /* takes up remaining space */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.bottom {
  padding-bottom: var(--safe-bottom, -safe-bottom);
}