/* 
This CSS rule adds a fixed banner displaying the name of the current environment 
(non-Production environments) at the top left corner of the screen, rotated at a -45-degree angle.
It uses the `data-environment-name` attribute on the body tag to dynamically set the displayed text.
*/
body[data-environment-name]:not([data-environment-name="Production"]):after {
    position: fixed;
    width: 130px; /* Fixed width to maintain the shape */
    height: 25px; /* Fixed height to maintain the shape */
    background: #EE8E4A;
    top: 20px;
    left: -30px;
    text-align: center;
    font-size: 11px; /* Default font size */
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    line-height: 25px; /* Vertically center the text */
    transform: rotate(-45deg);
    content: attr(data-environment-name);
    overflow: hidden; /* Ensures text doesn't overflow outside the banner */
    text-overflow: ellipsis; /* Adds dots if text is too long */
    white-space: nowrap; /* Prevents text from wrapping */
    box-sizing: border-box; /* Properly account for any borders or padding */
}