Side Sheet Right

<div class="nuda-mdx-ssheet" role="complementary">
  <div class="nuda-mdx-ssheet__dim"></div>
  <aside class="nuda-mdx-ssheet__panel" role="dialog" aria-label="Details panel">
    <div class="nuda-mdx-ssheet__header">
      <span class="nuda-mdx-ssheet__title">Details</span>
      <button class="nuda-mdx-ssheet__x" aria-label="Close">&times;</button>
    </div>
    <div class="nuda-mdx-ssheet__row"></div>
    <div class="nuda-mdx-ssheet__row nuda-mdx-ssheet__row--short"></div>
    <div class="nuda-mdx-ssheet__row"></div>
    <button class="nuda-mdx-ssheet__chip">Save changes</button>
  </aside>
</div>

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

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

.nuda-mdx-ssheet__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: #1a1a1a;
  border-left: 1px solid rgba(255,255,255,.09);
  padding: .7rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  animation: _nuda-mdxSsheetIn .4s cubic-bezier(.16,1,.3,1) both;
}

.nuda-mdx-ssheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .1rem;
}

.nuda-mdx-ssheet__title {
  font-size: .7rem;
  font-weight: 700;
  color: #fafafa;
}

.nuda-mdx-ssheet__x {
  font-size: .85rem;
  color: #555;
  cursor: pointer;
}

.nuda-mdx-ssheet__row {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  width: 100%;
}

.nuda-mdx-ssheet__row--short {
  width: 65%;
}

.nuda-mdx-ssheet__chip {
  margin-top: auto;
  background: rgba(228,255,84,.12);
  border: 1px solid rgba(228,255,84,.25);
  border-radius: 7px;
  color: #e4ff54;
  font-size: .6rem;
  font-weight: 600;
  padding: .3rem .6rem;
  text-align: center;
  cursor: pointer;
}

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

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