<h1 id="H1">Common Application Message Colors</h2>

<div id="Wrap">
  <section role="group" aria-labelledby="H1">
    <details id="Confirm">
      <summary id="btnConfirm" onclick="toggleDisclosure(this.id);">
        <span aria-hidden="true">
<!--           <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <line x1="10%" y1="50%" x2="90%" y2="50%" stroke-width="6" />
            <line x1="50%" y1="10%" x2="50%" y2="90%" stroke-width="6" />
          </svg> -->
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Confirmations
      </summary>
      <p>
        Use this green when letting a user know that a process has completed successfully or that all is well. <code>#31A677</code> is 6.9:1 with black text.
      </p>
    </details>
    <details id="Inform">
      <summary id="btnInform" onclick="toggleDisclosure(this.id);">
        <span aria-hidden="true">
<!--           <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <line x1="10%" y1="50%" x2="90%" y2="50%" stroke-width="6" />
            <line x1="50%" y1="10%" x2="50%" y2="90%" stroke-width="6" />
          </svg> -->
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Informational
      </summary>
      <p>
        Often blue is good for giving users update messages that don't require their input nor even for them to notice. <code>#6CACC9</code> is 8.4:1 with black text.
      </p>
    </details>
    <details id="Content">
      <summary id="btnContent" onclick="toggleDisclosure(this.id);">
        <span aria-hidden="true">
<!--           <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <line x1="10%" y1="50%" x2="90%" y2="50%" stroke-width="6" />
            <line x1="50%" y1="10%" x2="50%" y2="90%" stroke-width="6" />
          </svg> -->
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Content
      </summary>
      <p>
        On a white or near-white page, black or near-black text is generally a safe default color combination. <code>#EEE</code> is 18.1:1 with black text.
      </p>
    </details>
    <details id="Warn">
      <summary id="btnWarn" onclick="toggleDisclosure(this.id);">
        <span aria-hidden="true">
<!--           <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <line x1="10%" y1="50%" x2="90%" y2="50%" stroke-width="6" />
            <line x1="50%" y1="10%" x2="50%" y2="90%" stroke-width="6" />
          </svg> -->
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Warnings
      </summary>
      <p>
        Yellow signals to users that something may require their input, dependent on factors (which you should convey). <code>#DAD06F</code> is 13.2:1 with black text.
      </p>
    </details>
    <details id="Error">
      <summary id="btnError" onclick="toggleDisclosure(this.id);">
        <span aria-hidden="true">
<!--           <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <line x1="10%" y1="50%" x2="90%" y2="50%" stroke-width="6" />
            <line x1="50%" y1="10%" x2="50%" y2="90%" stroke-width="6" />
          </svg> -->
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Errors
      </summary>
      <p>
        Red is the common Western default for letting users know something has gone wrong. Avoid harsh reds. <code>#BB6673</code> is 5.3:1 with black text, 4:1 with white.
      </p>
    </details>
  </section>
</div>

@font-face {
  font-family: "Atkinson-Hyperlegible";
  font-style: normal;
  font-weight: 400;
  src: local("Atkinson-Hyperlegible"),
       local("Atkinson-Hyperlegible-Regular"),
       url("https://assets.codepen.io/2729/Atkinson-Hyperlegible-Regular-102a.woff2")
       format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson-Hyperlegible";
  font-style: italic;
  font-weight: 400;
  src: local("Atkinson-Hyperlegible-Italic"),
       local("Atkinson-Hyperlegible-Italic"),
       url("https://assets.codepen.io/2729/Atkinson-Hyperlegible-Italic-102a.woff2")
       format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson-Hyperlegible";
  font-style: normal;
  font-weight: 700;
  src: local("Atkinson-Hyperlegible-Bold"),
       local("Atkinson-Hyperlegible-Bold"),
       url("https://assets.codepen.io/2729/Atkinson-Hyperlegible-Bold-102a.woff2")
       format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson-Hyperlegible";
  font-style: italic;
  font-weight: 700;
  src: local("Atkinson-Hyperlegible-BoldItalic"),
       local("Atkinson-Hyperlegible-BoldItalic"),
       url("https://assets.codepen.io/2729/Atkinson-Hyperlegible-BoldItalic-102a.woff2")
       format("woff2");
  font-display: swap;
}


body {
/*   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */
  font-family: "Atkinson-Hyperlegible", "Segoe UI", -apple-system,
    BlinkMacSystemFont, Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
/*     line-height: 1.5; */
/*     letter-spacing: 0.12em; */
/*     word-spacing: 0.16em; */
  margin: 0;
  background-color: #000;
  color: #fff;
}

code {
  font-family: "Consolas", "Andale Mono", "Lucida Sans Typewriter",
    "Roboto Mono", "SF Mono", "Courier New", Courier, monospace;
  font-weight: normal;
  font-variant-ligatures: none;
}

h1 {
  text-align: center;
  line-height: 1;
}

details {
  color: #333;
  background: #eee;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

summary {
  list-style: none;
  text-align: center;
  padding: 1em 0;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary > span {
  width: .75em;
  height: .75em;
  display: inline-block;
  border-radius: 50%;
  padding: .1em;
  line-height: 0;
}

summary:focus {
  outline: none;
}

summary:focus > span,
summary:hover > span {
  outline: .1em solid #000;  
}

#Error summary:focus > span,
#Error summary:hover > span {
  outline-color: #fff;  
}

summary svg {
  width: .75em;
  height: .75em;
  fill: currentColor;
  translate: 0 .1em;
  transition: all 0.25s ease-in;
  transform-origin: center 45%;
}

/* details[open] summary svg line:last-child {
  stroke: transparent;
} */

details[open] summary svg {
  transform: rotate(180deg);
  translate: 0 0;
}

details p {
  margin: -.5em 0 0 0;
  padding: 0 0 1em 0;
  width: 25em;
}

#Confirm {
  background-color: #31A677;
  color: #000;
}

#Confirm summary {
  translate: 4em;
}

#Confirm p {
  translate: 22.7em;
}

#Inform {
  background-color: #6CACC9;
  color: #000;
}

#Inform summary {
  translate: 1em;
}

#Inform p {
  translate: 20em;
}

#Content summary {
  translate: -2.7em;
}

#Content p {
  translate: 17.4em;
}

#Warn {
  background-color: #DAD06F;
}

#Warn summary {
  translate: -5em;
}

#Warn p {
  translate: 14.8em;
}

#Error {
  background-color: #BB6673;
  color: #fff;
}

#Error summary {
  translate: -8.5em;
}

#Error p {
  translate: 12.2em;
}

div#Wrap {
  background-color: #555;
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: center;
  align-content: center;
  gap: 0;
  width: 50em;
  margin: 0 auto;
  overflow: hidden;
}

section[role][aria-labelledby] {
  transform: rotate(52deg);
  width: 120%;
  translate: -5em;
}


@media (max-width:50em) {
  body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "h1heading"
    "accordion";
    gap: 10em 0;
    justify-items: center;
    align-items: center;
    position: relative;
  }
  h1 {
    grid-area: h1heading;
  }
  div#Wrap {
    grid-area: accordion;
    transform: rotate(270deg);
/*     transform-origin: 61% 66%; */
    position: absolute;
    top: 1em;
  }
}

function closeAllDisclosures() {
  var openDs = document.querySelectorAll("details[open]");
  for (var i = 0; i < openDs.length; i++) {
    openDs[i].removeAttribute("open");
  }
}

function openAllDisclosures() {
  var allDs = document.querySelectorAll("details");
  for (var i = 0; i < allDs.length; i++) {
    allDs[i].setAttribute("open","");
  }
}

function toggleDisclosure(btnID,prt) {
  // If more than one is open, probably from an
  // in-page search (Chromium browsers)
  if (document.querySelectorAll("details[open]").length > 1) {
    // nada
  } else {
    closeAllDisclosures();
  }
  // Get the <summary> that triggered this
  var theTrigger = document.getElementById(btnID).parentNode;
  // If the <details> is open...
  if (theTrigger.open) {
    theTrigger.closed;
  // Otherwise <details> is not open...
  } else {
    theTrigger.open;
  }
}


// Handling expanding all, restoring for printing
var openD;

window.addEventListener("beforeprint", (event) => {
  openD = document.querySelector("details[open] summary").id;
  openAllDisclosures();
});
window.addEventListener("afterprint", (event) => {
  closeAllDisclosures();
  document.getElementById(openD).parentNode.setAttribute("open","");
});