/**
 * The following styles will only run on iPhone and are used to adjust
 * the layout to support iPhone X, Xr, Xs, and Xs Max
 */

/* iPhone X */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  /* iPhone Xr */ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
  /* iPhone Xs */ only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  /* iPhone Xs Max */ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  /** Login **/
  #login-form {
    padding-right: env(safe-area-inset-right) !important;
  }

  #sign-in-button-container {
    flex-basis: calc(80px + env(safe-area-inset-bottom)) !important;
    background-color: transparent !important;
  }

  #sign-in-button {
    height: calc(80px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  #select-business {
    padding-right: env(safe-area-inset-right) !important;
  }

  /** Main Application **/
  #site-header {
    padding-top: env(safe-area-inset-top) !important;
  }

  #main-content-wrapper {
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
  }

  .iphone-x-content {
    padding-right: env(safe-area-inset-right) !important;
  }

  #side-menu > div {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
  }

  /** Only need padding in landscape */
  @media screen and (orientation: landscape) {
    #side-menu > div {
      /** Not sure why but twice the inset is needed here */
      padding-bottom: calc(2 * env(safe-area-inset-bottom)) !important;
    }
  }

  /** POS */
  #pos-dismiss-button {
    margin-right: env(safe-area-inset-right) !important;
  }

  #product-list {
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  #cart-bar,
  /** POS non-header content */
  #pos-drawer > div > div:nth-child(2) > div > div:nth-child(2),
  #pos-drawer > div > div:nth-child(2) > div > div:nth-child(3),
  #pos-drawer > div > div:nth-child(2) > div > div:nth-child(4),
  #pos-header-container {
    padding-right: calc(max(20px, env(safe-area-inset-right))) !important;
  }

  /** Client Drawer */
  #client-drawer-header {
    padding-right: calc(max(12px, env(safe-area-inset-right))) !important;
  }

  #client-drawer-content {
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /** Other */
  #incompatibility-banner,
  #account-setup-incomplete-banner {
    /** specifiy minimum padding */
    padding-left: calc(max(12px, env(safe-area-inset-left))) !important;
    padding-right: calc(max(12px, env(safe-area-inset-right))) !important;
  }

  .day-footer-cell {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  #contacts-content,
  #calendar-content,
  #calendar-toolbar {
    max-width: calc(100vw - env(safe-area-inset-right) * 3) !important;
    padding-right: 0 !important;
  }

  #setting-tabs button:last-child {
    padding-right: env(safe-area-inset-right) !important;
  }

  .import-contacts-primary-action span {
    top: -5px;
  }
}