body.debug-structure > main > section,
body.debug-structure > main > section > .container,
body.debug-structure > main > section > .container > .content,
body.debug-structure > main > section > .container > .content > .grid,
body.debug-structure > main > section > .container > .content > .grid > .grid-cell {
    position: relative;
    padding: 2rem;
    border-width: 1px;
    border-style: dashed;
}

body.debug-structure.debug-structure--with-spacing {
    padding: 2rem;
}

body.debug-structure > main > section:before,
body.debug-structure > main > section > .container:before,
body.debug-structure > main > section > .container > .content:before,
body.debug-structure > main > section > .container > .content > .grid:before,
body.debug-structure > main > section > .container > .content > .grid > .grid-cell:before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    opacity: 0;
}

body.debug-structure.debug-structure--with-title > main > section:before,
body.debug-structure.debug-structure--with-title > main > section > .container:before,
body.debug-structure.debug-structure--with-title > main > section > .container > .content:before,
body.debug-structure.debug-structure--with-title > main > section > .container > .content > .grid:before,
body.debug-structure.debug-structure--with-title > main > section > .container > .content > .grid > .grid-cell:before {
    opacity: 1;
}

body.debug-structure > main > section {
    border-color: #F8239F;
}

/* body.debug-structure > main section:before,
body.debug-structure > main div:before {
    display: none;
} */

body.debug-structure.debug-structure--with-title > main section.editor-active:before,
body.debug-structure.debug-structure--with-title > main section:hover:before,
body.debug-structure.debug-structure--with-title > main div.editor-active:before,
body.debug-structure.debug-structure--with-title > main div:hover:before {
    display: block;
}

body.debug-structure > main > section.editor-active {
    background-color: #F8239F;
}

body.debug-structure > main > section:before {
    content: "Section";
    color: #F8239F;
}

body.debug-structure > main > section > .container {
    border-color: #D11ED9;
}

body.debug-structure > main > section > .container.editor-active {
    background-color: #D11ED9;
}

body.debug-structure > main > section > .container:before {
    content: "Container";
    color: #D11ED9;
}

body.debug-structure > main > section > .container > .content {
    border-color: #B22EF0;
}

body.debug-structure > main > section > .container > .content.editor-active {
    background-color: #B22EF0;
}

body.debug-structure > main > section > .container > .content:before {
    content: "Content";
    color: #B22EF0;
}

body.debug-structure > main > section > .container > .content > .grid {
    border-color: #6B1ED9;
}

body.debug-structure > main > section > .container > .content > .grid.editor-active {
    background-color: #6B1ED9;
}

body.debug-structure > main > section > .container > .content > .grid:before {
    content: "Grid";
    color: #6B1ED9;
}

body.debug-structure > main > section > .container > .content > .grid > .grid-cell {
    border: 1px solid #4023F8;
    height: 5rem;
    background-color: black;
}

body.debug-structure > main > section > .container > .content > .grid > .grid-cell:before {
    content: "Grid Cell";
    color: #4023F8;
}