.bigcommerce-settings-page {

	& {
		background-color: var(--color-white);
	}

	.regular-text {
		max-width: 540px;
		width: 100%;
	}

	.bigcommerce-connection-status__message {
		display: inline-block;
		font-size: var(--font-size-content-lg);
		color: var(--color-bc-success);
		font-weight: 500;
	}

	.bigcommerce-connection-status__message-failed {
		color: var(--color-bc-red);
	}

	p {
		font-size: var(--font-size-content-m);

		&.description {
			font-style: normal;
			color: var(--color-bc-black);
		}

		&.bc-welcome__pending-account-instructions {
			font-size: 1.65em;
			padding: 20px;
			background-color: var(--color-bc-shark);
			color: var(--color-white);
		}
	}

	.bc-settings-form input[type=submit],
	.bc-admin-btn {
		@mixin button-pill;
	}

	.bc-account-connection-button {
		white-space: normal;
		line-height: 1.4em;
	}

	.bc-admin-btn--outline {
		background: transparent;
		border: 1px solid var(--color-bc-doger-blue);
		color: var(--color-bc-doger-blue);

		&:hover,
		&:focus {
			background-color: var(--color-bc-doger-blue);
			border-color: var(--color-bc-doger-blue);
			color: var(--color-white);
		}
	}
}

.bigcommerce-onboarding-page {

	#wpwrap {
		position: relative;
		padding-bottom: 150px;
	}

	#wpcontent {
		padding-right: 10px;
		position: relative;
		z-index: 2;

		@media (--viewport-wpadmin) {
			padding-right: 20px;
		}
	}

	#wpfooter {
		border-top: 1px solid var(--color-bc-light-grey);
		z-index: 1;
	}

	.wrap {
		margin: 0;
	}
}

.bigcommerce_product_page_bigcommerce_pending_account #wpwrap {
	padding-bottom: 0;
}

.bc-settings-form {

	.form-table {
		margin-bottom: 4px;
		margin-top: 0;
	}

	form,
	.form-table th,
	.form-wrap label {
		color: var(--color-bc-black);
	}

	.form-table th,
	.form-wrap label {
		font-size: 1.071em;
	}

	.form-table th {
		font-weight: var(--font-weight-medium);

		@media (--viewport-wpadmin) {
			width: 170px;
		}
	}

	select,
	input {
		border: 2px solid var(--color-border-form-field);
		box-shadow: 0 0 0 1px transparent;
		color: var(--color-bc-shark);
		outline: 2px solid transparent;

		&:focus {
			border-color: var(--color-bc-doger-blue);
			box-shadow: 0 0 0 1px var(--color-bc-doger-blue);
			outline: 2px solid transparent;
		}
	}

	select {
		padding: 12px;
		height: 45px;
		line-height: initial;
		border-radius: 0;
	}

	input[type=text],
	input[type=password],
	input[type=url],
	input[type=number] {
		height: 40px;
		line-height: 40px;
		padding-top: 0;
		padding-bottom: 0;
	}

	input[type=checkbox] {
		width: auto;
		width: 20px;
		height: 20px;

		&:before {
			margin: -1px 0 0 -3px;
			font-size: 21px;
			width: 20px;
			height: 20px;
		}
	}

	input[type=radio] {

		&:before {
			background-color: var(--color-bc-doger-blue);
			position: relative;
			left: -1px;
			top: -1px;
		}
	}

	.button {
		text-shadow: none;
		font-size: var(--font-size-content);
		padding: 8px 12px;
		height: auto;
		transition: var(--transition);
	}

	.secondary {
		border-radius: 6px;

		&:hover,
		&:focus {
			background-color: #fdfdfd;
		}
	}

	.bc-welcome-reset {
		display: inline-block;
		vertical-align: middle;
		margin: 20px 0 5px;
		width: auto;
		padding-top: 10px;
		padding-bottom: 1.5em;
		font-size: 0.875em;
	}
}

.bc-settings-field--required {
	display: inline-block;
	color: var(--color-bc-red);
	margin-left: 4px;
}