@use "sass:color";
@use "../_inc/client/scss/variables/colors";
@use "../_inc/client/scss/calypso-colors";

#TB_window.jetpack-disconnect-modal {

	max-width: 635px;
	max-height: 600px;

	@media screen and (min-width: 661px) {
		max-height: 360px;
	}

	#TB_title {
		font-size: 28px;
		line-height: 24px;
		font-weight: 600;
		height: 24px;
		padding: 24px;
		color: colors.$wpui-header-dark;
	}

	#TB_ajaxWindowTitle {
		padding-left: 0;
		margin-top: -2px; // compensate line height and vertical align the title
	}

	#TB_ajaxContent {

		width: auto !important;
		padding: 0;
		max-height: 435px;

		@media screen and (min-width: 661px) {
			max-height: 203px;
		}

		.jetpack_deactivation_dialog_content {
			padding: 24px;
			padding-bottom: 80px;
			margin-top: 0;

			@media screen and (min-width: 661px) {
				padding-bottom: 24px;
			}

			p {
				font-size: 16px;
				line-height: 24px;
				margin-top: 0;
			}

			ul {
				font-size: 16px;
				line-height: 24px;

				li {

					margin-bottom: 10px;

					span {

						vertical-align: middle;

						&.dashicons {
							color: colors.$alert-hot-red;
						}

					}
				}

			}


		}
	}

	#TB_closeWindowButton {
		left: auto;
		right: 22px;
		color: colors.$wpui-dark-medium-gray;
		top: 22px;

		&::after {
			content: "\f335";
			font: 400 32px/29px dashicons;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&:hover,
		&:focus {
			color: colors.$gray;
			outline: none;
			box-shadow: none;
		}
	}

	.tb-close-icon {
		display: none;
	}

	.jetpack_deactivation_dialog_content__buttons-row-container {
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid calypso-colors.$light-gray-700;
		background-color: colors.$white;
	}

	.jetpack_deactivation_dialog_content__buttons-row {
		position: relative;
		margin: 24px;
		text-align: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;


		@media screen and (min-width: 661px) {
			flex-direction: row;
		}

		p {
			font-size: 13px;
			line-height: 1.5;
			margin-bottom: 0;
			margin-top: 0;
			padding-top: 0;

			@media screen and (min-width: 661px) {
				padding-top: 5px;
			}

		}

		.jetpack_deactivation_dialog_content__buttons {

			button {
				background: calypso-colors.$blue-grey-light;
				border-color: calypso-colors.$blue-medium-dark;
				border-style: solid;
				border-width: 1px;
				color: calypso-colors.$blue-medium-dark;
				cursor: pointer;
				display: inline-block;
				margin: 0;
				outline: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				text-decoration: none;
				vertical-align: top;
				box-sizing: border-box;
				font-size: 13px;
				border-radius: 3px;
				padding: 7px 14px 9px;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				width: 100%;
				margin-bottom: 18px;

				@media screen and (min-width: 661px) {
					margin-bottom: 0;
					margin-left: 18px;
					width: auto;
				}

				&#jetpack_deactivation_dialog_content__button-deactivate {
					background: colors.$alert-red;
					border-color: color.adjust(colors.$alert-red, $lightness: -20%);
					color: colors.$white;
					margin-bottom: 0;

					&[disabled],
					&:disabled {
						background: color.adjust(colors.$alert-red, $lightness: 20%);
						border-color: color.mix(#fff, colors.$alert-red, 30%);
					}
				}
			}

		}
	}
}

#jetpack_deactivation_dialog {
	display: none;
}
