.modal[open] {
  display: flex;
}

/* Окно занимает весь экран, прокручивается оно, а не страница под ним */
.modal {
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: var(--spacing-inset-md);
  border: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal::backdrop {
  background-color: rgb(34 33 30 / 60%);
}

.modal__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: 560px;

  /* Автоотступы центрируют панель, пока она ниже экрана, и обнуляются, когда выше */
  margin: auto;
  border-radius: var(--radius-l);
  background-color: var(--color-neutral-200);
}

.modal__head {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-gap-lg);
}

.modal__body {
  padding-right: var(--spacing-block-s);
  padding-bottom: var(--spacing-block-s);
  padding-left: var(--spacing-block-s);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-heading);
  appearance: none;
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-easing);
}

.modal__close:active {
  color: var(--color-accent-600);
  transition-duration: 0s;
}

@media (hover: hover) {
  .modal__close:hover:not(:active) {
    color: var(--color-accent-400);
  }
}

/* Пока разметка окна не пришла, на месте панели только индикатор */
.modal_loading .modal__panel {
  min-height: 160px;
}

.modal_loading .modal__body::after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: var(--spacing-block-s) auto;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-accent-500);
  border-radius: var(--radius-pill);
  animation: modal-spin 0.8s linear infinite;
}

@keyframes modal-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Прокрутка страницы под открытым окном не нужна, ширину ее полосы возвращает отступ */
html:has(.modal[open]) {
  padding-right: var(--page-scrollbar, 0px);
  overflow: hidden;
}

html:has(.modal[open]) body {
  overflow: hidden;
}

@media (min-width: 768px) {
  .modal {
    padding: var(--spacing-block-s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal_loading .modal__body::after {
    animation: none;
  }
}