.content {
  padding: 1rem;
  height: 3lh;
  overflow: hidden;
  transition: height 0.2s;
}

.demo-1 {
  interpolate-size: allow-keywords;

  .content {
    &.expanded {
      height: auto;
    }

    /* just for looks */
    & {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to top, #03a9f4, transparent 100px);
      }
      &.expanded::after {
        display: none;
      }
    }
  }
}

.demo-2 {
  .content {
    &.expanded {
      height: auto; /* gotta have fallback */
      height: calc-size(auto, size);
    }

    /* just for looks */
    & {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to top, #66bb6a, transparent 100px);
      }
      &.expanded::after {
        display: none;
      }
    }
  }
}

.demo-3 {
  interpolate-size: allow-keywords;

  button {
    padding: 0.25rem;
    margin-block-end: 0.25rem;
    border-radius: 1000px;
    background: rebeccapurple;
    color: white;
    border: 0;
    inline-size: 1.35rem;
    overflow: clip;
    white-space: nowrap;
    transition:
      0.2s inline-size,
      0.2s padding-inline;

    &:hover,
    &:focus {
      padding-inline: 1rem;
      inline-size: min-content;
    }
  }
}

.demo-4 {
  interpolate-size: allow-keywords;

  details {
    &::details-content {
      height: 0;
      overflow: hidden;
      transition:
        height 0.2s,
        content-visibility 0.2s;
      transition-behavior: allow-discrete;
    }
    &:open::details-content {
      height: auto;
    }
  }
}

@layer not-important-for-demo {
  [class^="demo"] {
    padding: 1rem;
  }
  .demo-1 {
    background: #03a9f4;
  }
  .demo-2 {
    background: #66bb6a;
  }
  .demo-3 {
    background: #9575cd;
  }
  .demo-4 {
    background: #f06292;
  }
  html {
    font: 100%/1.3 system-ui;
  }
  body {
    padding-block-end: 50vh;
    margin: 0;
  }
  pre {
    background: black;
    color: white;
    padding: 0.5rem;
  }
  h1,
  h2 {
    margin: 0;
  }
  h1 {
    font-weight: 900;
    padding: 1.5rem;
    text-align: center;
    text-wrap: balance;
  }
}

@layer support-warning {
  @supports not (interpolate-size: allow-keywords) {
    body::before {
      display: block;
      padding: 0.5rem;
      background: yellow;
      text-align: center;
      content: "⚠️ This browser doesn't yet support animating/transitioning to size keywords like auto. But the elements should still change state properly. Progressive enhancement!";
    }
  }
}