body.dev-diagnostics {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    var(--mv-dev-layer-0);
}

body.dev-diagnostics .mv4-dev-part,
body.dev-diagnostics .mv4-global-shell {
  background: color-mix(in srgb, var(--mv-dev-layer-1) 35%, white);
  outline: 1px solid var(--mv-dev-layer-1);
  position: relative;
}

body.dev-diagnostics .mv4-dev-route,
body.dev-diagnostics .mv4-route-shell {
  background: color-mix(in srgb, var(--mv-dev-layer-2) 22%, white);
  outline: 1px solid var(--mv-dev-layer-2);
  position: relative;
}

body.dev-diagnostics .mv4-dev-pattern {
  background: color-mix(in srgb, var(--mv-dev-layer-3) 22%, white);
  outline: 1px solid var(--mv-dev-layer-3);
  position: relative;
}

body.dev-diagnostics .mv4-dev-editable {
  background: color-mix(in srgb, var(--mv-dev-layer-4) 18%, white);
  outline: 1px dashed var(--mv-dev-layer-4);
  position: relative;
}

body.dev-diagnostics .mv4-dev-component {
  background: color-mix(in srgb, var(--mv-dev-layer-5) 12%, white);
  outline: 1px solid var(--mv-dev-layer-5);
  color: var(--mv-dev-ink);
  position: relative;
}

body.dev-diagnostics .mv4-dev-interactive,
body.dev-diagnostics .mv4-dev-interactive a,
body.dev-diagnostics a.mv4-dev-interactive,
body.dev-diagnostics button,
body.dev-diagnostics .wp-element-button {
  outline: 1px solid var(--mv-dev-layer-6);
}

body.dev-diagnostics .mv4-dev-part::before,
body.dev-diagnostics .mv4-dev-route::before,
body.dev-diagnostics .mv4-dev-pattern::before,
body.dev-diagnostics .mv4-dev-editable::before,
body.dev-diagnostics .mv4-dev-component::before {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font: 700 0.7rem/1 var(--wp--preset--font-family--system-mono, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.dev-diagnostics .mv4-dev-part::before {
  content: "Layer 1 Template Part";
  background: var(--mv-dev-layer-1);
}

body.dev-diagnostics .mv4-dev-route::before {
  content: "Layer 2 Route";
  background: var(--mv-dev-layer-2);
}

body.dev-diagnostics .mv4-dev-pattern::before {
  content: "Layer 3 Pattern";
  background: var(--mv-dev-layer-3);
}

body.dev-diagnostics .mv4-dev-editable::before {
  content: "Layer 4 Editable";
  background: var(--mv-dev-layer-4);
}

body.dev-diagnostics .mv4-dev-component::before {
  content: "Layer 5 Component";
  background: var(--mv-dev-layer-5);
  color: var(--mv-dev-paper);
}