<section>
  <h2>Classic</h2>
  <div>
    <web-logo>
      <div class="box css">
        <p>css</p>
      </div>  
    </web-logo>
    <web-logo>
      <div class="box css light">
        <p>css</p>
      </div>  
    </web-logo>
    <web-logo>
      <div class="box css dark">
        <p>css</p>
      </div>  
    </web-logo>
  </div>
  <div class="sm">
    <web-logo>
      <div class="box css">
        <p>css</p>
      </div>  
    </web-logo>
    <web-logo> 
      <div class="box css light">
        <p>css</p>
      </div>  
    </web-logo>
    <web-logo>
      <div class="box css dark">
        <p>css</p>
      </div>  
    </web-logo>
  </div>
</section>

<section> 
  <h2>Plus Levels</h2>
  <div>
    <web-logo>
      <div class="box css">
        <p>css</p> 
        <sup>5</sup>
      </div>
    </web-logo>
    <web-logo>
      <div class="box css light">
        <p>css</p> 
        <sup>6</sup>
      </div>
    </web-logo>
    <web-logo>
      <div class="box css dark">
        <p>css</p> 
        <sup>7</sup>
      </div>
    </web-logo>
  </div>
</section>

<section>
  <h2>With Friends</h2>
  <div>
    <web-logo>
      <div class="box css">
        <p>css</p> 
      </div>
    </web-logo>
    <web-logo>
      <div class="box js">
        <p>JS</p> 
      </div>
    </web-logo>
    <web-logo>
      <div class="box ts">
        <p>TS</p> 
      </div>
    </web-logo>
    <web-logo>
      <div class="box wa">
        <p>WA</p> 
      </div>
    </web-logo>
    <web-logo>
      <div class="box html">
        <p>HTML</p> 
      </div>
    </web-logo>
  </div> 
</section>

/*  
  Notes:
  - div is nested so it can adapt to the container
  - p is nested so the <sup> can stack with the language and share box padding
*/

@font-face {
  font-family: Neutraface;
  src: url(https://assets.codepen.io/2585/Neutraface+Text+Bold.otf);
}

web-logo {
  container-type: inline-size;
  
  /* testing only */
  resize: inline;
  overflow: hidden;
  
  .box {
    --_text: #2b2729;
    --_surface: gray;

    font-family: Neutraface;

    color: var(--_text);
    background: var(--_surface);

    aspect-ratio: 1;
    padding: 7.5cqi;
    font-size: 55cqi;

    display: grid;
    place-items: end;

    &.css {
      border-radius: 0 15cqi 15cqi;
      --_text: white;
      --_surface: #E1137C;
/*       --_surface: color(display-p3 100% 35% 80%); */

      &.light {
        --_surface: white;
        --_text: black;
      }

      &.dark {
        --_surface: black;
        --_text: white;
      }
    }

    &.ts {
      --_surface: #5286C6;
      --_text: white;
      font-size: 60cqi;
    }

    &.js {
      --_surface: #EFDE72;
/*       --_surface: color(display-p3 1 1 .35);  */
      font-size: 60cqi;
    }

    &.wa {
      --_surface: #5F51DF;
      --_text: white;
      font-size: 45cqi;
      mask: radial-gradient(circle at center top, #0000, 20%, #000 0);
      letter-spacing: -0.125em;
      padding-inline-end: calc(7.5cqi + 0.125em);
    }
    
    &.html {
      --_surface: #dc6e3c;
      --_text: white;
      font-size: 25cqi;
    }

    > * {
      grid-area: 1/1;
    }

    > p {
      /* this LOC needs Canary or Safari TP with the feature flag on */
      text-box: trim-both cap alphabetic;
      font-kerning: none;
    }

    > sup {
      -webkit-text-stroke: 4cqi var(--_text);
      color: var(--_surface);
      paint-order: stroke fill;
      
      font-variant-numeric: lining-nums;
      font-size: 50cqi;

      place-self: start end;

      @container (width < 75px) {
        display: none;
      }
    }
  }
}



@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
    
    background-color: light-dark(#ccc, #111);
    background-image: 
      radial-gradient(circle at center, #0000, light-dark(#ccc, #111)),
      radial-gradient(
        circle at 1px 1px, 
        light-dark(#0007, #fff4) 1px, 
        #0000 0
      );
    background-size: 200px 200px, 40px 40px;
    background-repeat: round, space;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 10vmin;
  }
  
  section {
    display: grid;
    gap: 1rem;
    
    > div {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 15vmin;
      gap: 1rem;
      
      &.sm {
        grid-auto-columns: 24px;
      }
    }
  }
}