<div class="support-notice">🐤 <strong>Heads-up!</strong> This demo only works in Chrome Canary at the moment with the experimental features flag enabled.</div>

<div id="invitePanel" class="invite-panel">
  <div class="panel-content">
    <h2>Notifications <span class="indicator">2</span></h2>
    <ol>
      <li>
        <svg viewBox="0 0 448 512" width="100" title="calendar-check">
        <path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z" />
      </svg>
        <span>Weekly Scrum</span>
        <span>Tuesdays <time datetime="08:00-08:30">8-8:15am</time></span>
        <button>Accept</button>
        <button>Decline</button>
      </li>
      <li>
        <svg viewBox="0 0 448 512" width="100" title="calendar-check">
          <path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z" />
      </svg>
        <span>Weekly Scrum</span>
        <span>Tuesdays <time datetime="08:00-08:30">8-8:15am</time></span>
        <button>Accept</button>
        <button>Decline</button>
      </li>
    </ol>
  </div>
</div>
<button id="trigger" class="invite-trigger">
  <span class="indicator">2</span>
</button>
<div class="calendar">
  <header>
    <h1>June 2024</h1>
  </header>

  <ul class="weekdays">
    <li>
      <abbr title="S">Sunday</abbr>
    </li>
    <li>
      <abbr title="M">Monday</abbr>
    </li>
    <li>
      <abbr title="T">Tuesday</abbr>
    </li>
    <li>
      <abbr title="W">Wednesday</abbr>
    </li>
    <li>
      <abbr title="T">Thursday</abbr>
    </li>
    <li>
      <abbr title="F">Friday</abbr>
    </li>
    <li>
      <abbr title="S">Saturday</abbr>
    </li>
  </ul>

  <ol class="day-grid">
    <li class="month=prev">29</li>
    <li class="month=prev">30</li>
    <li class="month=prev">31</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li class="month-next">1</li>
    <li class="month-next">2</li>
  </ol>
    
</div>
.invite-panel {
  height: 0;
  overflow-y: clip;
  transition: height 0.25s ease-in;
}

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  #invitePanel {
    transition-duration: 20ms;
  }
}

@layer presentation {
  .invite-panel {
    background: #eaeaea;
    
    .panel-content {
      padding: 1rem;
    }

    h2 span {
      background: #000;
      font-size: 1rem;
    }

    ol {
      background: #fff;
    }

    li {
      align-items: center;
      border-block-end: 1px solid #ccc;
      display: flex;
      gap: 1ch;
      padding: 0.25rem 0.5rem;

      span:first-of-type {
        font-weight: 800;
      }
    }

    svg {
      max-inline-size: 24px;
    }
  }

  .invite-trigger {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    position: fixed;
  }

  span.indicator {
    align-items: center;
    aspect-ratio: 1;
    background: hsl(20 100% 50%);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    transition: background 0.25s ease-in;
    width: 4ch;

    &:hover {
      background: #000;
    }
  }
}

@layer layout {
  header {
    background: #000;
    color: #fff;
    display: flex;
    font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
    justify-content: center;
    margin-bottom: 2rem;
    min-block-size: 10vh;
    place-items: center;
    position: relative;
  }

  .calendar ul,
  .calendar ol {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 1em;
    margin: 0 auto;
    max-width: 64em;
    padding: 0;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
    }
  }

  ul.weekdays {
    margin-bottom: 1em;
  }

  ul.weekdays li {
    height: 4vw;
  }

  ol.day-grid li {
    background-color: #eaeaea;
    border: 1px solid #eaeaea;
    height: 12vw;
    max-height: 125px;
  }

  ul.weekdays abbr[title] {
    border: none;
    font-weight: 800;
    text-decoration: none;
  }

  ol.day-grid li:nth-child(1),
  ol.day-grid li:nth-child(2),
  ol.day-grid li:nth-child(3),
  ol.day-grid li:nth-child(34),
  ol.day-grid li:nth-child(35) {
    background-color: #fff;
  }

  @media all and (max-width: 800px) {
    ul,
    ol {
      grid-gap: 0.25em;
    }

    ul.weekdays li {
      font-size: 0;
    }

    ul.weekdays > li abbr:after {
      content: attr(title);
      font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
      text-align: center;
    }
  }
}

@layer base {
  :is(ul, ol) {
    padding-inline-start: 0;

    li {
      list-style: none;
      margin-inline-start: 0;
    }
  }
  
  .support-notice {
    background: hsl(50 100% 90%);
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem;
    line-height: 1.55;
    margin-block: 1rem;
    margin-inline: auto;
    padding: 1rem;
    width: max(30ch, 80vw);
    
    @supports (height: calc-size(auto)) {
      display: none;
    }
  }
}
const btn = document.querySelector('#trigger');
const panel = document.querySelector('#invitePanel');

function toggleHeight() {
  if (panel.getAttribute("style") === null) {
    panel.setAttribute('style', 'height: calc-size(auto);');
  } else {
    panel.removeAttribute("style", "");
  }
}

btn.addEventListener('click', toggleHeight);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.