/*
 * WAYZAWAY NATIVE ACCOUNT DRAWER SAFE-AREA R1
 *
 * The original native safe-area CSS depends on the
 * transient .wz-native-drawer class.
 *
 * Vue can rewrite the drawer's class attribute during
 * route changes. The account-menu enhancer already supplies
 * data-wz-account-drawer="true" as its persistent hook.
 *
 * Apply the exact existing safe-area geometry through that
 * persistent hook as well.
 *
 * Native Android/iOS only.
 */

html.wz-native-app
.v-navigation-drawer[data-wz-account-drawer="true"] {
  bottom:
    var(--wz-native-bottom-clearance) !important;

  height:
    auto !important;

  max-height:
    calc(
      100dvh -
      var(--wz-native-bottom-clearance)
    ) !important;
}


html.wz-native-app
.v-navigation-drawer[data-wz-account-drawer="true"]
.v-navigation-drawer__content {
  padding-bottom:
    12px !important;

  box-sizing:
    border-box !important;
}


/*
 * Preserve the existing safe-area behaviour for the
 * signout append area even if Vue has just rewritten
 * the drawer/button class attributes.
 */
html.wz-native-app
.v-navigation-drawer[data-wz-account-drawer="true"]
.v-navigation-drawer__append {
  box-sizing:
    border-box !important;
}