@import 'ansyn/less/colors';
@import 'ansyn/less/common';

:host {
	background-color: @background-color-2;
	font: 500 20px/20px Roboto, "Helvetica Neue", sans-serif;
	display: flex;
	flex-direction: column;
	flex: 1;
	color: white;
	overflow: hidden;
	direction: rtl;
	// this popup is not opened under ansyn-component,
	// so we do not rely on inheriting the direction

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: @background-color-4;
		padding: 5px 10px;

		.mat-dialog-title {
			margin: 0;
		}
		button {
			width: 20px;
			height: 20px;
			padding: 1px 0;
			font-size: 10px;
			border-radius: 50%;
			outline: none;
		}
	}

	.mat-dialog-content {
		.mat-dialog-title {
			text-align: center;
			margin: 20px 0;
		}

		.method-chose {
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
			padding: 0 40px;
		}

		.option {
			display: flex;
			align-items: flex-start;
			padding: 5px 15px;
			margin: 10px 0;

			p {
				min-width: 100px;
				margin: 0 10px;
			}

			.mat-select {
				background-color: @background-color-4;
				width: 60%;
				max-width: 300px;

				/deep/ .mat-select-value {
					color: white;
					text-align: center;
				}

				&.mat-select-disabled {
					opacity: 0.5;
				}
			}

			.graphics {
				ansyn-checkbox:not(:first-child) {
					margin: 0 15px;
				}
			}
		}

		.note {
			margin: 1px;
			color: red;
			font-weight: bold;
			text-align: center;
		}
	}

	.mat-dialog-actions {
		padding: 20px;
		justify-content: flex-end;
		position: relative;

		button {
			background-color: @application-primary-color;
			color: white;
			margin: 0 10px;
			padding: 5px;
			border-radius: 10px;
			outline:none;

			&.reset-btn {
				background-color: @background-color-2;
				color: @application-primary-color;
				border: 1px solid @application-primary-color;
			}
		}

		div.status {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			pointer-events: none;
		}
	}
}

/deep/ mat-option {
	background-color: @background-color-4 !important;

	.mat-option-text {
		color: white;
	}

	&.mat-active, &.mat-selected, &:hover  {
		background-color: @background-color-6 !important;
	}
}
