@import './vars';

.yy-dialog {
	position: fixed;
	background: $--color-white;
	z-index: $--index-top + 1;
	border-radius: $--border-radius-base;
	transition: opacity 0.5s;
	&.is-inline {
		position: static;
	}
	&.is-shadow {
		box-shadow: $--box-shadow-base;
	}
	&.is-center {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	&.is-collapsed {
		overflow: hidden;
	}
	&.is-maximized {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: none !important;
	}
	&.yy-resizable--resizing {
		transition: unset;
	}
	&.yy-draggable--dragging {
		transition: unset;
	}

	&__wrapper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		&.is-inline {
			position: static;
		}
	}

	&__modal {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $--color-black;
		opacity: 0.3;
		width: 100%;
		height: 100%;
		z-index: $--index-top;
	}
	&__header {
		clear: both;
		&:after {
			content: '';
			display: table;
			clear: both;
		}
		height: 40px;
		line-height: 40px;
		background: $--color-primary-light;
		padding: 0 10px;
		border-radius: $--border-radius-base $--border-radius-base 0 0;
	}

	&__icon {
		float: left;
		margin-right: 8px;
	}

	&__title {
		float: left;
		font-size: 16px;
		color: $--color-text-primary;
	}

	&__tools {
		float: right;
		user-select: none;
		[class^='el-icon-'],
		[class*=' el-icon-'] {
			font-size: 14px;
			top: 2px;
			padding: 0 3px;
			cursor: pointer;
		}
		.iconfont {
			font-size: 14px;
			padding: 0 3px;
			cursor: pointer;
		}
	}
	&__tool {
		color: $--color-text-regular;
		height: 16px;
		text-align: center;
		cursor: pointer;
		&:hover {
			color: $--color-primary;
		}
		[class^='el-icon-'],
		[class*=' el-icon-'] {
			font-size: 18px;
			position: relative;
			top: 2px;
			padding: 0 2px;
			cursor: pointer;
		}
		.iconfont {
			font-size: 14px;
			padding: 0 5px;
			cursor: pointer;
		}
	}

	&__body {
		padding: 10px;
		height: calc(100% - 20px);
	}

	&__footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 10px;
		border-top: 1px solid $--border-color-extra-light;
		border-radius: 0 0 $--border-radius-base $--border-radius-base;
	}
}