html:has(.modal.is-aside[open]) {
  overflow: hidden;
}
html:has(.modal.is-preview:not(.is-hidden)[open]) {
  --modal-width: calc(100% - min(50vw, 1000px));
  padding-left: var(--modal-width);
}
.modal[open] {
  border: none;
  padding: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  animation-fill-mode: both;
  box-shadow: 0 0 1px #0003, 0 0 30px #0002;

  &.is-center {
    padding: 2rem 1rem 1rem;
    inset: 0;
    border-radius: var(--border-radius);
    width: min(400px, 90vh);
  }

  &.is-aside {
    animation: modalIn var(--animation-duration);
    width: clamp(300px, 66vw, 600px);
    inset: 0 0 0 auto;
    max-height: 100vh;
    height: auto;
    margin: 0;
  }

  &.is-preview {
    animation: previewIn var(--animation-duration);
    width: var(--modal-width);
    inset: 0 auto 0 0;
    position: fixed;
    max-height: 100vh;
    height: auto;
    margin: 0;
    z-index: 2;
    transition: transform var(--animation-duration);
    display:flex;
    resize: both;
    overflow: hidden;
  }
}

.modal-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.modal-content {
  border: none;
  height: 100%;
  width: 100%;
}

@keyframes modalIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes previewIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}