/* Browsers which partially support CSS Environment variables (iOS 11.0-11.2). */
@supports (padding-top: constant(safe-area-inset-top)) {
  /* class to apply basic safe-area paddings */
  .safe-area {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-left: constant(safe-area-inset-left);
    --safe-area-inset-right: constant(safe-area-inset-right);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
  }

  /* class to apply only X paddings */
  .safe-area-x {
    --safe-area-inset-left: constant(safe-area-inset-left);
    --safe-area-inset-right: constant(safe-area-inset-right);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
  .safe-area-y {
    --safe-area-inset-top: constant(safe-area-inset-top);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
  }
}

/* Browsers which fully support CSS Environment variables (iOS 11.2+). */
@supports (padding-top: env(safe-area-inset-top)) {
  /* class to apply basic safe-area paddings */
  .safe-area {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
  }

  /* class to apply only X paddings */
  .safe-area-x {
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);

}
  .safe-area-y {
    --safe-area-inset-top: calc( env(safe-area-inset-top,30px) - 5px);
    padding-top: var(--safe-area-inset-top);
  }
  .safe-area-y-bottom {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    padding-bottom: var(--safe-area-inset-bottom);
  }

}