/**
 * @file
 * Preview Fix styles.
 *
 * Ensures the node preview toolbar and "Back to content editing" link
 * are always visible and not overlapped by the Drupal admin toolbar.
 */

/**
 * Base positioning for the preview container.
 * Ensures it sits above any overlapping elements.
 */
.node-preview-container {
  position: relative;
  z-index: 501;
}

/**
 * When the vertical (sidebar) admin toolbar tray is open,
 * push the preview container to the right so the back link
 * is not hidden underneath it.
 *
 * The JS handles the dynamic offset; this is a CSS-only fallback
 * for the default expanded state on page load.
 */
body.toolbar-vertical.toolbar-tray-open .node-preview-container {
  margin-left: 240px;
  transition: margin-left 0.18s ease;
}

/**
 * When the horizontal admin toolbar is shown (collapsed sidebar),
 * push the preview container down to clear the toolbar bar height.
 */
body.toolbar-horizontal .node-preview-container {
  margin-top: 39px;
}

body.toolbar-horizontal.toolbar-tray-open .node-preview-container {
  margin-top: 79px;
}

/**
 * Make the "Back to content editing" link stand out more.
 * It is easy to miss in the default Drupal styling.
 */
.node-preview-form-select .form-actions a,
#node-preview-back-link-wrapper a {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  padding: 0.25em 0;
}

/**
 * Ensure the preview form select bar does not get clipped.
 */
.node-preview-form-select {
  overflow: visible !important;
  position: relative;
  z-index: 600;
}