/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./dev/scss/frames/_iframe.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
html[frame-adminify-iframe=true] {
  padding-top: 0 !important;
}

html[frame-adminify-iframe=true] #adminmenumain,
html[frame-adminify-iframe=true] #wpadminbar {
  display: none !important;
}

html[frame-adminify-iframe=true] #wpcontent,
html[frame-adminify-iframe=true] #wpfooter {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/**
 * Pre-publish panel in the block editor - duplicate Publish button.
 *
 * Core anchors the panel below the admin bar - `top: 46px` below 782px where the
 * panel is full-bleed, `top: 32px` on desktop where it is the right-hand sidebar -
 * so it lines up with the editor header it is meant to cover. Inside the Adminify
 * frame the admin bar is hidden (above) and the editor header moves up to the top
 * of the iframe, so that gap leaves the header - Publish button and all - showing
 * above the panel's own Cancel / Publish row. Anchor the panel to the top of the
 * iframe at every width so it covers the header the way it does in the default
 * admin. Newer core builds drive the offset from `--wp-admin--admin-bar--height`,
 * so zero that too for anything else keyed to it.
 */
html[frame-adminify-iframe=true] {
  --wp-admin--admin-bar--height: 0px;
}

html[frame-adminify-iframe=true] .editor-post-publish-panel {
  top: 0;
}

/**
 * Media library popup on real mobile devices - breathing room at the bottom.
 *
 * WordPress renders the modal full-bleed below 640px and pins its toolbar flush
 * to the modal's bottom edge, so the "Set featured image" / "Select" button ends
 * up hard against the device edge - and on phones with a home indicator, partly
 * under it. Lift the whole modal box instead of touching the toolbar, so the
 * toolbar keeps the geometry core gives it (`.media-frame-toolbar` bottom 60px
 * + `.media-toolbar` bottom -60px) and everything inside moves up together.
 */
@media screen and (max-width: 782px), screen and (max-height: 400px) {
  html[frame-adminify-iframe=true] .media-modal,
  html[frame-adminify-iframe=true] .image-details .media-modal {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
/**
 * Media library popup on real mobile devices - legacy browsers only.
 *
 * The shell sizes the iframe against the visible viewport (`100dvh`), so the
 * media modal fits and its bottom toolbar - the "Set featured image" / "Select"
 * button - is reachable. Browsers without `dvh` support (iOS < 15.4,
 * Chrome < 108) fall back to `100vh`, which mobile browsers resolve against the
 * LARGE viewport (URL bar hidden). There the iframe hangs below the visible
 * area and takes the modal's toolbar with it.
 *
 * Shrink the modal by the Adminify topbar height for those browsers only, on
 * top of the 16px gap above.
 */
@supports not (height: 100dvh) {
  @media screen and (max-width: 782px), screen and (max-height: 400px) {
    html[frame-adminify-iframe=true] .media-modal,
    html[frame-adminify-iframe=true] .image-details .media-modal {
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
  }
}