@use "../atoms/colors/colors";

/* 'Pages' is a temporary location for these styles until we
 * can break them up into their proper atomic locations */

// ==========================================================================
// Jetpack Protect Config Page
//==========================================================================


.configure-module p {
	font-size: 14px;

	&.success,
	&.error {
		color: colors.$white;
		padding: 10px;
	}

	&.success {
		background-color: colors.$green;
	}

	&.error {
		background-color: colors.$red;
	}
}

.protect-status {

	p {
		font-size: 16px;
	}

	strong {
		display: inline-block;
		margin-top: 10px;
		background: #fff;
		padding: 10px;
		border: 1px #dcdcde solid;
		font-size: 16px;
		color: #000;
		max-width: 100%;
	}

	&.attn {
		color: colors.$red;
	}

	&.working {
		color: colors.$green;
	}
} // .protect-status

.protect-whitelist {

	textarea {
		width: 100%;
		min-height: 150px;
	}
}

/* btns + inputs */

.configure-module {

	input[disabled] {
		opacity: 0.5;
	}

	input.button-primary {
		font-weight: 700;
	}
}

/* whitelist table */

@media only screen and (min-width: 1100px) {

	.protect-whitelist {
		width: 65%;
		float: left;
	}

} /* end > 1065px */

@media only screen and (max-width: 400px) {

	.protect-status strong {
		font-size: 12px;
		overflow: auto;
	}

} /* end < 400px */
