@dialog-prefix-cls: ~'@{ant-prefix}-modal';

.@{dialog-prefix-cls} {
	.reset-component();
	.modal-mask();

	position: relative;
	top: 100px;
	width: auto;
	max-width: calc(100vw - 32px);
	margin: 0 auto;
	padding-bottom: 24px;

	&-wrap {
		z-index: @zindex-modal;
	}

	&-title {
		margin: 0;
		color: @modal-heading-color;
		font-weight: 500;
		font-size: @modal-header-title-font-size;
		line-height: @modal-header-title-line-height;
		word-wrap: break-word;
	}

	&-content {
		position: relative;
		background-color: @modal-content-bg;
		background-clip: padding-box;
		border: 0;
		border-radius: @border-radius-base;
		box-shadow: @shadow-2;
		pointer-events: auto;
	}

	&-close {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
		z-index: @zindex-popup-close;
		padding: 0;
		color: @dbk-secondary;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		background: @white;
		border-radius: 50%;
		box-shadow: 0 2px 5px rgba(@black, 0.25);
		border: 0;
		outline: 0;
		cursor: pointer;
		transition: color, background-color 0.3s;

		&-x {
			@modal-close-button-size: ceil((@modal-header-close-size / 3) * 1.25);
			display: block;
			width: @modal-close-button-size;
			height: @modal-close-button-size;
			font-size: @font-size-lg;
			font-style: normal;
			line-height: @modal-close-button-size;
			text-align: center;
			text-transform: none;
			text-rendering: auto;
		}

		&:focus,
		&:hover {
			color: @white;
			background-color: @dbk-secondary;
		}
	}

	&-header {
		padding: @modal-header-padding;
		color: @text-color;
		background: @modal-header-bg;
		border-bottom: @modal-header-border-width @modal-header-border-style @modal-header-border-color-split;
		border-radius: @border-radius-base @border-radius-base 0 0;
	}

	&-body {
		padding: @modal-body-padding;
		font-size: @font-size-base;
		line-height: @line-height-base;
		word-wrap: break-word;
	}

	&-footer {
		padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
		text-align: right;
		background: @modal-footer-bg;
		border-top: @modal-footer-border-width @modal-footer-border-style @modal-footer-border-color-split;
		border-radius: 0 0 @border-radius-base @border-radius-base;

		.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
			margin-bottom: 0;
			margin-left: 8px;
		}
	}

	&-open {
		overflow: hidden;
	}
}

.@{dialog-prefix-cls}-centered {
	text-align: center;

	&::before {
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
		content: '';
	}
	.@{dialog-prefix-cls} {
		top: 0;
		display: inline-block;
		padding-bottom: 0;
		text-align: left;
		vertical-align: middle;
	}
}

@media (max-width: @screen-sm-max) {
	.@{dialog-prefix-cls} {
		max-width: calc(100vw - 16px);
		margin: 8px auto;
	}
	.@{dialog-prefix-cls}-centered {
		.@{dialog-prefix-cls} {
			flex: 1;
		}
	}
}