.bc-settings-bigcommerce_connect,
.bc-settings-bigcommerce_new_account {
	display: flex;
	flex-direction: column;
}

.bc-connect__header {

	p,
	li {
		font-size: 0.938em;
		line-height: 1.44;
		font-weight: var(--font-weight-thin);

		@media (--viewport-wpadmin) {
			font-size: var(--font-size-content-xl);
		}
	}
}

.bc-connect__header,
.bc-new-account__header,
.bc-settings-form--bigcommerce_store_type {
	margin: 10px 0 30px;

	@media (--viewport-medium) {
		margin-bottom: 36px;
	}
}

.bc-settings .bc-settings-connect__title {
	color: var(--color-bc-black);
	font-size: 1.86em;
	font-weight: var(--font-weight-thin);
	line-height: 1.1;
	margin: 0;
	padding: 2px 0 4px;

	@media (--viewport-medium) {
		font-size: 2.16em;
	}
}

.bc-onboarding__video {
	overflow: hidden;

	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
}

.bc-onboarding__video-embed {
	position: relative;
	box-sizing: border-box;

	&:before {
		position: relative;
		display: block;
		content: "";
		padding-top: 56.25%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}

.bc-connect-spinner {
	float: none;
	visibility: visible;
	margin: 0 10px 0 0;
}

.bc-account-connection-response {
	padding: 20px;
	font-size: 0.938em;
	border: 1px solid var(--color-bc-light-grey);
	border-left: 10px solid var(--color-bc-blue-light);

	&--error {
		border-left-color: var(--color-bc-red);
	}
}

.bc-account-connection__error-title {
	margin-top: 0;
}

.bc-account-connection__error-code {
	font-size: var(--font-size-content);
	font-weight: var(--font-weight-bold);

	code {
		font-weight: normal;
	}
}

.bc-account-connection__error-message {
	display: block;
	margin-top: 4px;
	font-size: 0.938em;
}

.bc-settings-account-creation-wrapper {
	display: block;
	text-align: center;
	margin-top: 15px;

	.spinner {
		margin: 0 8px;
		float: none;
	}
}

/* Account Reset */
.bc-welcome-reset,
.bc-welcome-skip-menu-setup {
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}

.bc-welcome-skip-menu-setup {
	bottom: -80px;
}

.bc-welcome__account-reset-wrapper,
.bc-welcome__account-reset-overlay {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;

	@media (--viewport-wpadmin) {
		width: calc(100% - 36px);
		height: calc(100% - 32px);
		top: 32px;
	}

	@media (--viewport-full) {
		width: calc(100% - 160px);
	}

	.folded & {
		width: calc(100% - 36px);
	}
}

.bc-welcome__account-reset-wrapper {
	z-index: 159000;

	&[aria-hidden='true'] {
		display: none;
	}
}

.bc-welcome__account-reset-overlay {
	background: var(--color-black);
}

.bc-account-reset-logo {
	background-image: url("var(--path-images)/admin/big-commerce-logo-white.svg");
	background-size: contain;
	width: 119px;
	height: 27px;
	position: absolute;
	left: 27px;
	top: 32px;
	background-repeat: no-repeat;
}

.bc-welcome__account-reset-content {
	color: var(--color-white);
	width: 100%;
	height: 100vh;

	.bc-admin-btn--outline {
		border-color: var(--color-white);
		background: transparent;
		color: var(--color-white);

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

.bc-welcome__account-reset-content-wrapper {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	max-height: 260px;
	max-width: 780px;
	width: calc(100% - 40px);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 40px;

	@media (--viewport-wpadmin) {
		width: 100%;
	}

	@media (--viewport-full) {
		padding: 80px;
	}
}

.bc-welcome-account-reset-icon {
	font-size: 38px;
	margin-bottom: 10px;
	color: var(--color-bc-doger-blue);
}

p.bc-welcome__account-reset-message {
	font-size: 24px;
	font-weight: var(--font-weight-thin);
	margin-top: 0;
	margin-bottom: 0.75em;
	line-height: 1.2em;
	max-width: 620px;
	width: 100%;

	@media (--viewport-wpadmin) {
		font-size: 28px;
	}
}

.bc-welcome__account-reset-actions {
	margin-top: 20px;
	width: 100%;

	.bc-admin-btn {
		display: block;
		margin: 10px auto 0;
		width: 100%;
		max-width: 204px;

		@media (--viewport-small) {
			display: inline-block;
			vertical-align: middle;
			margin-right: 15px;
		}
	}
}

.bc-welcome__account-reset-close-button {
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 20px;
	background-color: transparent;
	color: var(--color-white);
	border: 0;
	padding: 8px;
	z-index: 20;
	cursor: pointer;
	opacity: 0.6;
	transition: var(--transition-opacity);

	&:hover,
	&:focus {
		opacity: 1;
	}
}

/* Store Type (Blogging or Full Featured) */
.bc-settings-bigcommerce_store_type {

	.bc-connect__header {
		margin-bottom: 30px;
	}
}

.bc-settings-form--bigcommerce_store_type {
	margin-top: 0;
	width: 100%;

	.bc-welcome-reset,
	.bc-welcome-choose-blog-full {
		margin: 0;
		width: 100%;

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

	.bc-welcome-anchor--startover,
	.bc-admin-btn {
		width: 100%;
		margin-bottom: 20px;
		text-align: center;

		@media (--viewport-wpadmin) {
			width: auto;
			margin-bottom: 0;
			margin-right: 10px;
		}
	}
}

.bc-welcome-anchor--startover {
	border: 0;
	background: transparent;
	color: var(--color-bc-doger-blue);
	text-transform: uppercase;
	font-weight: 700;
	opacity: 1;
	transition: var(--transition-opacity);
	cursor: pointer;
	padding-top: 13px;
	padding-bottom: 12px;

	&:hover,
	&:focus {
		opacity: 0.8;
	}
}

.bc-welcome-choose-blog-full {
	width: auto;
	padding-top: 10px;
	padding-bottom: 1.5em;
	font-size: 0.875em;

	@media (--viewport-wpadmin) {
		display: inline-block;
		vertical-align: middle;
	}
}

.icon-bc-bc_create_account:before {
	content: var(--icon-bc-accounts);
}

p.bc-welcome__next-steps-title {
	font-size: var(--font-size-content-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	margin-bottom: 38px;
}

.bc-welcome__next-steps-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}

.bc-welcome__next-steps-item {
	flex: 0 0 100%;
	box-sizing: border-box;
	margin-bottom: 38px;

	@media (--viewport-wpadmin) {
		flex: 0 1 50%;
		padding-right: 50px;
	}

	.bc-icon {
		display: block;
		color: var(--color-bc-bright-turquoise);
		font-size: var(--font-size-content-xxl);
		margin-bottom: 11px;
	}
}

p.bc-welcome__new-account-email {
	color: var(--color-white);
	font-size: var(--font-size-content-lg);
	margin-top: 2em;
}

p.bc-welcome__next-steps-description {
	font-size: 2.2em;
	line-height: 1.32em;
	font-weight: var(--font-weight-thin);
	margin-bottom: 14px;
	margin-top: 4px;
}

.bc-welcome__next-steps-anchor {
	text-transform: uppercase;
	color: var(--color-bc-doger-blue);
	transition: var(--transition);
	text-decoration: none;

	&:hover,
	&:focus {
		color: var(--color-bc-blue-turquoise);
	}
}
