html:has(.modal.is-aside[open]) {
  overflow: hidden;
}
html:has(.modal.is-preview:not(.is-hidden)[open]) {
  --modal-width: max(min(500px, 90vw), 50%, 100% - var(--app-width));

  .app-container {
    max-width: max(min(500px, 90vw), 100% - var(--modal-width));
    margin-inline: auto 0;

    @media (width < 1000px) {
      position: fixed;
      box-shadow: var(--shadow-big);
      top: 0;
      right: 0;

      &:focus,
      &:focus-within {
        z-index: 3;
      }
    }
  }
}
.modal[open] {
  border: none;
  padding: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  animation-fill-mode: both;
  box-shadow: var(--shadow-big);
  background-color: var(--color-background);
  color: var(--color-text);

  &::backdrop {
    background-color: var(--backdrop);
  }

  &.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: 0.5rem;
  right: 0.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;
  }
}