@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

// .css-79ws1d-MuiModal-root {
:global(.MuiModal-root),
:global([class$='-MuiModal-root']) {
	z-index: 999300 !important;
}

.modalContent {
	span {
		display: flex;
		align-items: start;

		input[type='checkbox'] {
			position: relative;
			width: 30px;
			height: 20px;
			margin-top: 2px;
			margin-right: 10px;

			// &::before {
			// 	content: '';
			// 	position: relative;
			// 	display: inline-block;
			// 	width: 20px;
			// 	height: 20px;
			// }
		}

		ul {
			margin-left: 20px;
		}
	}
}

.modalButtons {
	.confirmButton,
	.cancelButton {
		@include Button;

		font-size: 14px;
		color: white !important;
		padding: 10px 20px;
		min-width: 150px;
		border: 0;
	}

	.confirmButton {
		background-color: var(--primary-color);
		&:hover {
			background-color: var(--primary-color);
		}

		&.confirmButtonMargin {
			margin-right: 20px;

			background-color: $hyperlink-color;
			&:hover {
				background-color: $hyperlink-color;
			}
		}
	}

	.confirmButtonRed {
		background-color: $red !important;
		&:hover {
			background-color: darken($red, 10%) !important;
		}
	}

	.cancelButton {
		background-color: transparent;
		border: 1px solid transparent;
		color: $grey-button !important;
		&:hover {
			background-color: $font-light-grey;
			border-color: $font-light-grey;
			color: #ffffff !important;
		}
	}
}