Bottom Action Sheet

<div class="nuda-mdx-bas" role="dialog" aria-modal="true" aria-label="Action sheet">
  <div class="nuda-mdx-bas__backdrop"></div>
  <div class="nuda-mdx-bas__sheet">
    <div class="nuda-mdx-bas__handle"></div>
    <p class="nuda-mdx-bas__label">Choose an action</p>
    <button class="nuda-mdx-bas__item">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12l7-7 7 7" stroke="#cfcfcf" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Share
    </button>
    <button class="nuda-mdx-bas__item">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="5" y="2" width="14" height="20" rx="2" stroke="#cfcfcf" stroke-width="1.8"/><path d="M9 7h6M9 12h6M9 17h4" stroke="#cfcfcf" stroke-width="1.5" stroke-linecap="round"/></svg>
      Copy link
    </button>
    <button class="nuda-mdx-bas__item nuda-mdx-bas__item--danger">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><polyline points="3 6 5 6 21 6" stroke="#ff6b6b" stroke-width="1.8" stroke-linecap="round"/><path d="M19 6l-1 14H6L5 6" stroke="#ff6b6b" stroke-width="1.8" stroke-linecap="round"/><path d="M10 11v6M14 11v6" stroke="#ff6b6b" stroke-width="1.5" stroke-linecap="round"/></svg>
      Delete
    </button>
  </div>
</div>

.nuda-mdx-bas {
  position: relative;
  width: 100%;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
}

.nuda-mdx-bas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
}

.nuda-mdx-bas__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 14px 14px 0 0;
  padding: .65rem .75rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  animation: _nuda-mdxBasIn .4s cubic-bezier(.16,1,.3,1) both;
}

.nuda-mdx-bas__handle {
  width: 32px;
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  margin: 0 auto .5rem;
}

.nuda-mdx-bas__label {
  margin: 0 0 .3rem;
  font-size: .62rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nuda-mdx-bas__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: #cfcfcf;
  font-size: .7rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}

.nuda-mdx-bas__item:hover {
  background: rgba(255,255,255,.05);
}

.nuda-mdx-bas__item--danger {
  color: #ff6b6b;
}

.nuda-mdx-bas__item--danger:hover {
  background: rgba(255,107,107,.07);
}

@keyframes _nuda-mdxBasIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mdx-bas__sheet {
    animation: none;
  }
}