<div class="wrapper">
  <div class="sidebar">
    <nav>
      <ul role="list">
        <li>
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8" />
            </svg>
            Add content
          </a>
        </li>
        <li>
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4" />
            </svg>
            Profile
          </a>
        </li>
        <li>
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5l-8-5V6l8 5l8-5z" />
            </svg>
            Messages
          </a>
        </li>
        <li>
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M18 16v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1zm-5 0h-2v-2h2zm0-4h-2V8h2zm-1 10c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2" />
            </svg>
            Alerts
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <main>
    <div class="cards">
      <div class="card">
        <h2>Settings</h2>
        <p>This could be some sort of settings or interface panel where you can adjust your preferences. Maybe you want to give the option to show text next to the icons instead of collapsed ones. In that case you can check the following checkbox and the width will animate thanks to <br /><code>interpolate-size: allow-keywords</code>.</p>
        <label class="expand">
          <input type="checkbox" class="toggle-nav" />
          Expand navigation
        </label>
      </div>
      <div class="card">
        <h2>Notification</h2>
        <p>Another nice to have with <code>interpolate-size: allow-keywords</code> is quickly show full content height for example:</p>
        <div class="alert" role="alert" id="alert">
          <h3>This is a warning</h3>
          <div class="text">With a whole lot of text that you might not want to show right away. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi.
          </div>
          <button aria-expanded="false" aria-controls="alert" aria-label="Toggle alert height">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 12l-4-4h8z" />
            </svg>
          </button>
        </div>
      </div>
      <div class="card">
        <h2>More</h2>
        This is just the beginning. It is just one of those quality of life improvements that makes animation a lot less tedious. From alerts, to navigations to accordions. This is defintatly one for my reset CSS :)
      </div>
    </div>
  </main>
</div>

@import url("https://fonts.googleapis.com/css2?family=REM:ital,wght@0,100..900;1,100..900&display=swap");

@layer reset, presentation, navigation, controls;

@layer presentation {
  :root {
    --icon-size: 2rem;
    --base-padding: 1rem;
    @supports (interpolate-size: allow-keywords) {
      interpolate-size: allow-keywords;
    }
    @media (width < 500px) {
      --icon-size: 1.4rem;
      --base-padding: 0.5rem;
    }
  }
}

/* Navigation and alert have more presentational styles, but to keep the demo on point, I show what happens ot hem in a seperate layer */

@layer navigation {
  nav {
    width: var(--icon-size);
    overflow: clip;
    transition: width 0.4s ease-out;
    a {
      display: grid;
      grid-template-columns: var(--icon-size) auto;
      align-items: center;
      gap: 8px;
      text-wrap: nowrap;
    }
  }
}

@layer alert {
  .alert {
    position: relative;
    .text {
      position: relative;
      height: 70px;
      transition: height 0.4s ease-out;
      overflow: clip;
      &::after {
        position: absolute;
        content: "";
        inset-inline: 0;
        inset-block-end: 0;
        height: 15px;
        background: linear-gradient(180deg, transparent 0%, #e8ddb5 100%);
        transition: opacity 0.3s ease-out;
      }
    }
    &:has(button[aria-expanded="true"]) .text {
      height: auto;
      &::after {
        opacity: 0;
      }
    }
  }
}

@layer controls {
  .wrapper:has(.toggle-nav:checked) nav {
    width: auto;
  }
}

/* From here on it's mostly just presentation, I sometimes get carried away a bit :) */
@layer presentation {
  .wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 100dvh;
  }

  .sidebar {
    border-right: 4px solid #666a86;
    padding: var(--base-padding);
    background: #333333;
  }

  nav {
    position: sticky;
    top: 0;
    a {
      color: #93e1d8;
      padding-block: calc(var(--base-padding) / 2);
      text-decoration: none;
      transition: color 0.4s ease-out;
      &:is(:hover, :focus) {
        color: #95b8d1;
      }
    }
  }

  h2 {
    margin: 0;
    padding-bottom: var(--base-padding);
    margin-bottom: var(--base-padding);
    border-bottom: 4px double #95b8d1;
    font-size: 2rem;
    letter-spacing: 0.04em;
  }

  .alert {
    background: #e8ddb5;
    border-radius: 0.5rem;
    color: #333;
    padding: 1rem;
    button {
      position: absolute;
      bottom: 0;
      right: 0;
      background: none;
      border: none;
      color: #333;
      transition: all 0.2s ease-out;
      transform-origin: center;
      cursor: pointer;
      &:is(:hover, :focus) {
        color: #666a86;
      }
      &[aria-expanded="true"] {
        rotate: -180deg;
      }
    }
    h3 {
      margin: 0;
      padding-bottom: calc(var(--base-padding) / 2);
      margin-bottom: calc(var(--base-padding) / 2);
      border-bottom: 4px double #dfbfaa;
      font-size: 1.2rem;
      letter-spacing: 0.02em;
    }
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(35ch, 100%), 1fr));
    gap: 30px;
    padding: var(--base-padding);
  }

  .card {
    background: #333;
    padding: calc(var(--base-padding) * 2);
    border-radius: 1rem;
    border-width: 8px;
    border-color: #666a86;
    border-style: groove ridge ridge groove;
  }

  .expand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    margin-top: 1.6rem;
    cursor: pointer;
  }

  input[type="checkbox"] {
    accent-color: #95b8d1;
    width: 1.3rem;
    aspect-ratio: 1;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: #edafb8;
    font-family: "REM", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff;
    @media (width < 500px) {
      font-size: 0.95rem;
    }
  }

  ul[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

const buttons = document.querySelectorAll("button[aria-expanded]");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const isExpanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", !isExpanded);
  });
});