/*
 * Всплывающий диалог webcomp.forms - базовые стили.
 *
 * Каждое оформительское значение проходит через var(--webcomp-dialog-*, <дефолт>):
 * сайт перекрашивает диалог, объявляя переменные у себя (:root или своя тема), и
 * этот файл не редактирует. Дефолты повторяют текущий вид, поэтому модуль работает
 * "из коробки" и не тянет за собой ничьих фирменных цветов - тем здесь намеренно нет.
 *
 * Canvas / CanvasText - системные цвета CSS (холст документа и текст на нём): ровно
 * то, чем UA-стиль красит <dialog> по умолчанию. Пара сама остаётся читаемой при
 * color-scheme: dark и в режиме высокой контрастности.
 *
 * Полный список переменных и пример переопределения - в README, раздел
 * "Диалог-лоадер -> Темизация".
 */

.webcomp-dialog {
  border: var(--webcomp-dialog-border, 0);
  border-radius: var(--webcomp-dialog-radius, 0.5rem);
  padding: var(--webcomp-dialog-padding, 2rem 1.5rem 1.5rem);
  width: var(--webcomp-dialog-width, calc(100% - 2rem));
  max-width: var(--webcomp-dialog-max-width, 480px);
  max-height: var(--webcomp-dialog-max-height, calc(100% - 2rem));
  overflow: var(--webcomp-dialog-overflow, auto);
  background: var(--webcomp-dialog-bg, Canvas);
  color: var(--webcomp-dialog-color, CanvasText);
  box-shadow: var(--webcomp-dialog-shadow, 0 1rem 3rem rgba(0, 0, 0, 0.25));
}

.webcomp-dialog::backdrop {
  background: var(--webcomp-dialog-backdrop-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--webcomp-dialog-backdrop-filter, none);
}

.webcomp-dialog__close {
  position: absolute;
  top: var(--webcomp-dialog-close-top, 0.5rem);
  right: var(--webcomp-dialog-close-right, 0.75rem);
  border: var(--webcomp-dialog-close-border, 0);
  background: var(--webcomp-dialog-close-bg, transparent);
  font-size: var(--webcomp-dialog-close-size, 1.5rem);
  line-height: 1;
  cursor: pointer;
  color: var(--webcomp-dialog-close-color, var(--webcomp-dialog-muted, #6c757d));
}

.webcomp-dialog__close:hover {
  color: var(--webcomp-dialog-close-color-hover, var(--webcomp-dialog-color, CanvasText));
}

.webcomp-dialog__loader {
  display: flex;
  justify-content: center;
  padding: var(--webcomp-dialog-loader-padding, 2rem 0);
  color: var(--webcomp-dialog-loader-color, var(--webcomp-dialog-muted, #6c757d));
}