@import (reference) "./variables.less";
@import (reference) "../../portal/style/index.less";

.@{dialog-prefix} {
	position: fixed;
	display: flex;
	flex-direction: column;
	max-width: calc(min(@dialog-max-width, 100dvi) - (@dialog-margin-x * 2));
	height: fit-content;
	max-height: calc(100dvb - (@dialog-margin-y * 2));
	margin: auto;
	padding: 0;
	background-color: var(--bg-secondary);
	border: 0;
	border-radius: @border-radius-large;
	color: var(--text-default);
	box-shadow: @shadow-small, @shadow-extra;
	transform-origin: bottom center;
	outline: 0;
	pointer-events: auto;
	z-index: @z-index-modal;

	&&-fullscreen {
		width: calc(100% - (100dvi - 100%));
		max-width: none;
		height: calc(100% - (100dvb - 100%));
		max-height: none;
		margin: 0;
		border-radius: 0;

		& .@{dialog-prefix}-body {
			flex: 1;
		}

		@media (min-width: (@dialog-max-width * 1.125)) {
			width: fit-content;
			max-width: @dialog-max-width;
			height: fit-content;
			max-height: calc(100dvb - (@dialog-margin-y * 2));
			margin: auto;
			border-radius: @border-radius-large;

			& .@{dialog-prefix}-body {
				flex: auto;
			}
		}
	}

	&:not([open]) {
		display: none;
	}

	&-header {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		width: 100%;
	}

	&-title {
		padding: 0;
		margin: 0;
		font-size: @font-size-medium;
		font-weight: @font-weight-bold;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	button&-close {
		flex-shrink: 0;
		margin-block: 0;
		margin-inline: auto -@dialog-padding-y;
		color: var(--text-secondary);

		&::after {
			@size: 0.5em;

			content: "";
			position: absolute;
			inset-block-start: -(@size / 2);
			inset-block-end: 0;
			inset-inline-start: -(@size / 2);
			inset-inline-end: 0;
			width: calc(100% + @size);
			height: calc(100% + @size);
		}
	}

	&-body {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	&-footer {
		flex-shrink: 0;
		display: flex;
		flex-flow: row-reverse wrap;
		gap: @padding-tiny;
		text-align: right;

		&-stacked {
			flex-flow: column nowrap;
		}
	}

	&::backdrop {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: @z-index-modal-backdrop;
		pointer-events: auto;
		.backdrop-filter-blur(0.25em);
	}
}

.@{dialog-confirm-prefix} {
	max-width: calc(min(@dialog-confirm-max-width, 100dvi) - (@dialog-margin-x * 2));
	padding-block: @dialog-padding-y;
	padding-inline: @dialog-padding-x;
}

.@{dialog-modal-prefix} {
	.@{dialog-prefix}-header {
		height: (unit(@line-height, em) * 2);
		padding-block: 0;
		padding-inline: @dialog-padding-x;
		border-block-end: @border-width-medium @border-style var(--border-secondary);
	}

	.@{dialog-prefix}-body {
		padding-block: @dialog-padding-y;
		padding-inline: @dialog-padding-x;
	}

	.@{dialog-prefix}-footer {
		padding-block: @dialog-padding-y calc(@dialog-padding-y + env(safe-area-inset-bottom, 0px));
		padding-inline: @dialog-padding-x;
		border-block-start: @border-width-medium @border-style var(--border-secondary);
	}
}