/* viewport-fit=cover lets backgrounds extend behind the system UI, but the
   controls must stay inside the safe area (including on iPads and rotation). */
.safe-area-header {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.workspace-mobile-drawer {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 767px) {
  .workspace-mobile-header {
    height: calc(4rem + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .workspace-content {
    padding-top: calc(4rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The professional sign-in screen has no separate header. */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 1023px) {
    #app > main > section:first-child {
      padding-top: calc(1.75rem + env(safe-area-inset-top));
    }
  }
}