/*
 * Styles for the editor stand-in shown when a shortcode renders nothing an
 * editor can see. These classes are never emitted on the front end; they live
 * here because BlockAutoLoader registers this file as the block type's `style`,
 * which WordPress loads into the iframed editor canvas as well as the page.
 * Styling the placeholder from the theme would not reach that iframe.
 *
 * Every child selector is scoped through the wrapper class rather than styled
 * on its own. These are ordinary `p`, `code` and `span` elements, and the
 * editor canvas carries theme and global-styles rules for them
 * (`.editor-styles-wrapper p` and friends) that outrank a single class, so a
 * bare `.wfu_shortcode_placeholder__note` loses its font size and margins. Two
 * classes win without needing `!important`. Sizes are explicit values for the
 * same reason: `smaller` is relative to whatever the canvas has already decided
 * the base font size is, which is exactly what gets overridden.
 */
.wfu_shortcode_placeholder {
  border: 1px dashed var(--wp--custom--color--neutral-200, #c3c4c7);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}

.wfu_shortcode_placeholder .wfu_shortcode_placeholder__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey, #50575e);
}

.wfu_shortcode_placeholder .wfu_shortcode_placeholder__code {
  display: block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  background: var(--wp--preset--color--light-grey, #f0f0f1);
  font-family: Menlo, Consolas, monaco, monospace;
  font-size: 0.9rem;
  word-break: break-word;
}

/*
 * The inline editing target keeps a visible box when the field is empty, so
 * there is something to click and type into, and ACF's placeholder text has
 * somewhere to sit.
 */
.wfu_shortcode_placeholder .wfu_shortcode_placeholder__code:empty::before {
  content: attr(data-acf-placeholder);
  color: var(--wp--preset--color--grey, #50575e);
}

.wfu_shortcode_placeholder .wfu_shortcode_placeholder__code:focus {
  outline: 2px solid var(--wp--preset--color--old-gold, #9e7e37);
  outline-offset: 1px;
}

/*
 * The note also carries `is-style-small-text` in the markup. That is the
 * theme's own opt-out from the rule that upsizes paragraphs inside a styled
 * column to 1.125rem; see the comment in template.php. The size below is what
 * actually applies, and it still holds on a theme that defines no such style.
 */
.wfu_shortcode_placeholder .wfu_shortcode_placeholder__note {
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0.6rem 0 0;
  color: var(--wp--preset--color--grey, #50575e);
}