Bottom Sheet

<div class="nuda-bsheet">
  <div class="nuda-bsheet__scrim"></div>
  <div class="nuda-bsheet__panel" role="dialog" aria-label="Bottom sheet">
    <div class="nuda-bsheet__handle"></div>
    <div class="nuda-bsheet__title">Share to</div>
    <div class="nuda-bsheet__row"><span class="nuda-bsheet__icon"></span> Messages</div>
    <div class="nuda-bsheet__row"><span class="nuda-bsheet__icon"></span> Mail</div>
    <div class="nuda-bsheet__row"><span class="nuda-bsheet__icon"></span> Copy link</div>
  </div>
</div>

/* Bottom Sheet
   iOS-style sheet that slides up with a drag handle.
   Customize: --bsheet-bg, --bsheet-radius */

.nuda-bsheet {
  --bsheet-bg: #111114;
  --bsheet-radius: 20px;
  position: relative;
  width: 280px;
  height: 280px;
  background: #09090b;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-bsheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: nuda-bsheet-fade 0.35s ease both;
}

.nuda-bsheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bsheet-bg);
  border-radius: var(--bsheet-radius) var(--bsheet-radius) 0 0;
  padding: 12px 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: nuda-bsheet-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nuda-bsheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  margin: 2px auto 12px;
}

.nuda-bsheet__title {
  color: #fafafa;
  font: 600 13px/1 system-ui;
  margin-bottom: 10px;
}

.nuda-bsheet__row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a0a0a8;
  font: 500 12px/1 system-ui;
  padding: 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-bsheet__icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(228, 255, 84, 0.15);
  border: 1px solid rgba(228, 255, 84, 0.3);
}

@keyframes nuda-bsheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nuda-bsheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-bsheet__scrim,
  .nuda-bsheet__panel {
    animation: none;
  }
}