.ui-system-dialog {
	--ui-system-dialog-padding-x: 24px;
	--ui-color-bg-content: var(--ui-color-bg-content-primary);
	--popup-window-background-color: var(--ui-color-bg-content);
}

.ui-system-dialog.--bg-vibrant {
	--ui-color-bg-content: var(--ui-color-bg-vibrant-less);

	-webkit-backdrop-filter: var(--ui-bg-blur-default);

	        backdrop-filter: var(--ui-bg-blur-default);
}

.ui-system-dialog.--bg-default {
	--ui-color-bg-content: var(--ui-color-bg-content-primary);
}

body.ui-system-dialog__disable-scrolling {
	width: 100%;
	position: fixed;
	scrollbar-gutter: stable;
}

.ui-system-dialog__header {
	box-sizing: border-box;
	width: 100%;
	padding: 14px var(--ui-system-dialog-padding-x) 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.ui-system-dialog__header:has(.ui-system-dialog__header-left:empty) {
	display: none;
}

.ui-system-dialog__header-left {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.ui-system-dialog__header-close-btn {
	--ui-icon-set__icon-color: var(--ui-color-base-4);
	position: relative;
	right: -4px;
	width: 24px;
	height: 26px;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.ui-system-dialog__header-close-btn:empty {
	display: none;
}

.ui-system-dialog__subtitle {
	margin-top: 6px;
	color: var(--ui-color-base-4);
}

.ui-system-dialog__content {
	box-sizing: border-box;
	width: 100%;
	padding: 12px var(--ui-system-dialog-padding-x) 18px;
}

.ui-system-dialog__content.--rm-vertical {
	padding-top: 0;
	padding-bottom: 0;
}

.ui-system-dialog__content.--rm-horizontal {
	padding-left: 0;
	padding-right: 0;
}

.ui-system-dialog__footer {
	box-sizing: border-box;
	padding: 0 var(--ui-system-dialog-padding-x);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0 12px;
}

.ui-system-dialog__footer:empty {
	display: none;
}

.ui-system-dialog__left-buttons,
.ui-system-dialog__center-buttons,
.ui-system-dialog__right-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	gap: 0 12px;
	margin-bottom: 24px;
}

.ui-system-dialog__left-buttons:empty,
.ui-system-dialog__center-buttons:empty,
.ui-system-dialog__right-buttons:empty {
	display: none;
}

.ui-system-dialog__left-buttons {
	justify-content: flex-start;
}

.ui-system-dialog__center-buttons {
	justify-content: center;
}

.ui-system-dialog__right-buttons {
	justify-content: flex-end;
}

/* Стили для указателей диалога */
.ui-system-dialog.popup-window-with-angle {
	position: relative;
}

.ui-system-dialog.popup-window-with-angle::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	z-index: 1;
}

/* Указатели сверху */
.ui-system-dialog.popup-window-angle-top-left::before {
	top: -8px;
	left: 30px;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--ui-color-bg-content) transparent;
}

.ui-system-dialog.popup-window-angle-top-center::before {
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--ui-color-bg-content) transparent;
}

.ui-system-dialog.popup-window-angle-top-right::before {
	top: -8px;
	right: 30px;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--ui-color-bg-content) transparent;
}

/* Указатели справа */
.ui-system-dialog.popup-window-angle-right-top::before {
	top: 30px;
	right: -8px;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--ui-color-bg-content);
}

.ui-system-dialog.popup-window-angle-right-center::before {
	top: 50%;
	right: -8px;
	transform: translateY(-50%);
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--ui-color-bg-content);
}

.ui-system-dialog.popup-window-angle-right-bottom::before {
	bottom: 30px;
	right: -8px;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--ui-color-bg-content);
}

/* Указатели снизу */
.ui-system-dialog.popup-window-angle-bottom-left::before {
	bottom: -8px;
	left: 30px;
	border-width: 8px 8px 0 8px;
	border-color: var(--ui-color-bg-content) transparent transparent transparent;
}

.ui-system-dialog.popup-window-angle-bottom-center::before {
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 8px 8px 0 8px;
	border-color: var(--ui-color-bg-content) transparent transparent transparent;
}

.ui-system-dialog.popup-window-angle-bottom-right::before {
	bottom: -8px;
	right: 30px;
	border-width: 8px 8px 0 8px;
	border-color: var(--ui-color-bg-content) transparent transparent transparent;
}

/* Указатели слева */
.ui-system-dialog.popup-window-angle-left-top::before {
	top: 30px;
	left: -8px;
	border-width: 8px 8px 8px 0;
	border-color: transparent var(--ui-color-bg-content) transparent transparent;
}

.ui-system-dialog.popup-window-angle-left-center::before {
	top: 50%;
	left: -8px;
	transform: translateY(-50%);
	border-width: 8px 8px 8px 0;
	border-color: transparent var(--ui-color-bg-content) transparent transparent;
}

.ui-system-dialog.popup-window-angle-left-bottom::before {
	bottom: 30px;
	left: -8px;
	border-width: 8px 8px 8px 0;
	border-color: transparent var(--ui-color-bg-content) transparent transparent;
}