@import '../../style/mixins/index';

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

.@{confirm-prefix-cls} {
	.@{ant-prefix}-modal-header {
		display: none;
	}

	.@{ant-prefix}-modal-body {
		padding: @modal-confirm-body-padding;
	}

	&-body-wrapper {
		.clearfix();
	}

	&-body {
		text-align: center;
		position: relative;
		margin-bottom: 24px;
		padding-top: 50px;

		.@{confirm-prefix-cls}-icon {
			min-width: 200px !important;
			height: 200px !important;
			position: absolute;
			top: -150px;
			left: 50%;
			transform: translateX(-50%);

			img {
				height: 200px !important;
			}
		}

		.@{confirm-prefix-cls}-title {
			display: block;
			// create BFC to avoid
			// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
			// overflow: hidden;
			color: @heading-color;
			font-weight: 900;
			font-size: @modal-confirm-title-font-size * 1.5;
			margin-top: 2.5rem;
			line-height: 1;
		}

		.@{confirm-prefix-cls}-content {
			margin-top: 20px;
			color: @text-color;
			font-size: @font-size-base;

			::marker {
				color: #40b8e6;
				font-size: 1rem;
			}
		}

		> .@{iconfont-css-prefix} {
			// float: left;
			// top: -100%;
			// position: absolute;
			font-size: 44px;

			// `content` after `icon` should set marginLeft
			/* + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
				margin-left: 38px;
			} */
		}
	}

	.@{confirm-prefix-cls}-btns {
		.dbk-btn {
			padding: 10px 20px !important;
			min-width: 100px !important;
		}
	}

	@media screen and (max-width: @screen-xs) {
		.@{confirm-prefix-cls}-btns {
			text-align: center;
			margin-left: 0 !important;

			.@{ant-prefix}-btn + .@{ant-prefix}-btn {
				margin-bottom: 0;
				margin-left: 8px;
				width: 80% !important;
				margin-left: 0 !important;
				margin-top: 10px !important;
			}

			.@{ant-prefix}-btn-default {
				width: 80% !important;
			}
		}
	}

	@media screen and (min-width: @screen-xs) {
		.@{confirm-prefix-cls}-btns {
			text-align: center;
			margin-left: 0 !important;

			.@{ant-prefix}-btn + .@{ant-prefix}-btn {
				margin-bottom: 0;
				margin-left: 8px;
			}
		}
	}

	&-error &-body > .@{iconfont-css-prefix},
	&-error &-body > .@{confirm-prefix-cls}-title {
		color: @error-color;
	}

	&-warning &-body > .@{iconfont-css-prefix},
	&-warning &-body > .@{confirm-prefix-cls}-title {
		color: @warning-color;
	}

	&-info &-body > .@{iconfont-css-prefix},
	&-info &-body > .@{confirm-prefix-cls}-title {
		color: @info-color;
	}

	&-success &-body > .@{iconfont-css-prefix},
	&-success &-body > .@{confirm-prefix-cls}-title {
		color: @success-color;
	}

	&-confirm &-body > .@{iconfont-css-prefix},
	&-confirm &-body > .@{confirm-prefix-cls}-title {
		color: @dbk-secondary;
	}
}