<aside class="s-modal ps-absolute bbr-sm z-base" id="modal-base" aria-hidden="false">
                <div class="s-modal--dialog ps-relative" role="document">
                    <div class="confetti">
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                        <div class="confetti-piece"></div>
                    </div>
                    <h1 class="s-modal--header" id="modal-title">You’re published!</h1>
                    <p class="s-modal--body" id="modal-description">Nullam ornare lectus vitae lacus sagittis, at sodales leo viverra. Suspendisse nec nulla dignissim elit varius tempus. Cras viverra neque at imperdiet vehicula. Curabitur condimentum id dolor vitae ultrices. Pellentesque scelerisque nunc sit amet leo fringilla bibendum. Etiam feugiat imperdiet mi, eu blandit arcu cursus a.</p>
                    <div class="grid gs8 gsx s-modal--footer">
                        <button class="grid--cell s-btn s-btn__primary" type="button">Save changes</button>
                        <button class="grid--cell s-btn" type="button">Cancel</button>
                    </div>
                    <button class="s-modal--close s-btn s-btn__muted" aria-label="Close">
                        <svg aria-hidden="true" class="svg-icon iconClearSm" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7 12 3.41z"></path></svg>
                    </button>
                </div>
            </aside>
<button class="s-btn s-btn__muted s-btn__filled ps-fixed r12 t12" onclick="document.getElementsByTagName('body')[0].classList.toggle('theme-dark');">Toggle dark mode</button>

.s-modal.s-modal__celebration {

}

$yellow: #FBBA23;
$blue: #65BB5C;
$pink: #2A2F6A;
$orange: #F23B14;

$duration: 700;

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

.confetti {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 10px;
  background: $yellow;
  top: -10px;
  opacity: 0;
  
  @for $i from 1 through 13 {
    &:nth-child(#{$i}) {
      left: $i * 7%;
      transform: rotate(#{randomNum(-180, 180)}deg);
      animation: makeItRain $duration * 1ms infinite ease-out;
      animation-delay: #{randomNum(0, $duration * .5)}ms;
      animation-duration: #{randomNum($duration * .5, $duration * 1)}ms
    }
  }
  
  &:nth-child(odd) {
    background: $blue;
  }
  
  &:nth-child(even) {
    z-index: 1;
  }
  
  &:nth-child(4n) {
    width: 5px;
    height: 13px;
    animation-duration: $duration * 2ms;
    background: $orange;
  }
  
  &:nth-child(3n) {
    width: 5px;
    height: 13px;
    animation-duration: $duration * 2.5ms;
    animation-delay: $duration * 1ms;
  }
  
  &:nth-child(4n-7) {
    background: $pink;
  }
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }
  
  20% {
    opacity: 1;
  }
  
  to {
    transform: translateY(96px);
  }
}

@media (prefers-reduced-motion) {
    // We'll need to reduce this motion based on this media query
}