/* padding for status bar & nav bar via safe-area-inset */
.safe-area {
  /* iOS < 11, status bar is 20, nav bar is 44 */
  padding: 64px 0 0;

  /* iOS 11 */
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
    constant(safe-area-inset-bottom) constant(safe-area-inset-left);

  /* iOS 11.2+ */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.safe-area-padding-top {
  /* iOS < 11, status bar is 20, nav bar is 44 */
  padding-top: 64px;

  /* iOS 11 */
  padding-top: constant(safe-area-inset-top);

  /* iOS 11.2+ */
  padding-top: env(safe-area-inset-top);
}

.safe-area-padding-bottom {
  /* iOS 11 */
  padding-bottom: constant(safe-area-inset-bottom);

  /* iOS 11.2+ */
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-margin-top {
  /* iOS < 11, status bar is 20, nav bar is 44 */
  margin-top: 64px;

  /* iOS 11 */
  margin-top: constant(safe-area-inset-top);

  /* iOS 11.2+ */
  margin-top: env(safe-area-inset-top);
}

.safe-area-margin-bottom {
  /* iOS 11 */
  margin-bottom: constant(safe-area-inset-bottom);

  /* iOS 11.2+ */
  margin-bottom: env(safe-area-inset-bottom);
}

/* align to the bottom of nav bar, for position: fixed */
.safe-area-fixed-top {
  position: fixed;

  /* iOS < 11, status bar is 20, nav bar is 44 */
  top: 64px;

  /* iOS 11 */
  top: constant(safe-area-inset-top);

  /* iOS 11.2+ */
  top: env(safe-area-inset-top);
}

/* align to the top of safe-area-inset-bottom, for position: fixed */
.safe-area-fixed-bottom {
  position: fixed;

  /* iOS < 11 */
  bottom: 0;

  /* iOS 11 */
  bottom: constant(safe-area-inset-bottom);

  /* iOS 11.2+ */
  bottom: env(safe-area-inset-bottom);
}

/* for position: absolute */
.safe-area-attached-top {
  position: absolute;

  /* iOS < 11, status bar is 20, nav bar is 44 */
  top: 64px;

  /* iOS 11 */
  top: constant(safe-area-inset-top);

  /* iOS 11.2+ */
  top: env(safe-area-inset-top);
}

/* for position: absolute */
.safe-area-attached-bottom {
  position: absolute;

  /* iOS < 11 */
  bottom: 0;

  /* iOS 11 */
  bottom: constant(safe-area-inset-bottom);

  /* iOS 11.2+ */
  bottom: env(safe-area-inset-bottom);
}

/* align to the top of nav bar, only ios < 11 and android, more digging here */
.safe-area-fixed-nav-top {
  top: 20px;
}

.no-safe-area-padding-top .safe-area-padding-top {
  padding-top: 0 !important;
}