@import "../utils/directional";

$color_1: rgb(102, 102, 102);
$color_2: #919191;
$color_3: #fff;
$color_4: #3C4858;
$color_5: #FFFFFF;
$color_6: #43a047;
$color_7: #e22525;
$font-family_1: "Helvetica", sans-serif;
$background-color_1: #ffcbee;
$background-color_2: rgb(100 212 219 / 60%);
$background-color_3: transparent;
$background-color_4: #3E4857;
$background-color_5: rgb(102, 102, 102);
$border-color_1: #000 transparent transparent transparent;

@keyframes sswps-loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
body.woocommerce_page_sswps-main {
	.notice.error {
		display: none !important;
	}
}
.sswps-main__page {
	width: 100%;
	padding: 10px;
	background: #fff;
	margin: auto;
	box-sizing: border-box;
}
.sswps-support__page {
	width: 100%;
	padding: 10px;
	background: #fff;
	margin: auto;
	box-sizing: border-box;
	.sswps-main__header {
		.description {
			text-align: left;
			margin-top: 20px;
		}
	}
}
.sswps-main__container {
	max-width: 960px;
	display: flex;
	flex-direction: column;
	h1 {
		font-size: 22px;
	}
}
.sswps-main__header {
	width: 100%;
	h1 {
		color: $color_1;
	}
	.description {
		flex: 1 1 auto;
		text-align: center;
	}
	p {
		color: $color_2;
	}
}
.sswps-main__logo {
	display: flex;
	align-items: center;
	img {
		width: 100px;
	}
	img.stripe {
		width: 80px;
	}
	span {
		margin: 0 8px;
		color: $color_1;
	}
}
.sswps-main__row {
	display: flex;
	flex-wrap: wrap;
	margin: 20px -10px 0 -10px;
}
.sswps-support__content {
	.sswps-main__row {
		justify-content: center;
	}
}
.sswps-main__card {
	flex: 0 0 50%;
	max-width: 300px;
	padding: 10px;
	a {
		text-decoration: none !important;
		outline: none !important;
		border: none;
		box-shadow: none;
		color: $color_3;
		&:active {
			text-decoration: none !important;
			outline: none !important;
			border: none;
			box-shadow: none;
			color: $color_3;
		}
		&:focus {
			text-decoration: none !important;
			outline: none !important;
			border: none;
			box-shadow: none;
			color: $color_3;
		}
		&:hover {
			text-decoration: none !important;
			outline: none !important;
			border: none;
			box-shadow: none;
			color: $color_3;
		}
	}
}
.sswps-main-card__content {
	width: 100%;
	display: flex;
	box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
	height: 100%;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	flex-direction: column;
	transition: box-shadow 400ms;
	&:hover {
		box-shadow: rgb(0 0 0 / 20%) 0px 2px 10px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
	}
	p {
		color: $color_2;
	}
	h3 {
		font-size: 1.5em;
	}
}
.icon-container {
	content: ' ';
	min-width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #ccd1ff;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	img.icon {
		width: 60px;
		height: 60px;
	}
	span {
		color: $color_3;
		font-size: 40px;
		width: 40px;
		height: 40px;
	}
}
.card-header {
	padding: 20px;
	text-align: center;
}
.icon-container.support {
	background-color: $background-color_1;
}
.icon-container.documentation {
	background-color: $background-color_2;
}
.sign-up-container {
	.sib-form-block {
		padding: 0;
	}
}
.sib-form-block {
	p {
		font-size: 20px;
		text-align: left;
		font-weight: 700;
		font-family: $font-family_1;
		color: $color_4;
		background-color: $background-color_3;
	}
}
.sib-text-form-block {
	p {
		font-size: 16px;
		color: $color_2;
	}
}
.sib-form {
	.entry_errored {
		.entry__error {
			padding: 4px 8px;
			font-size: 14px;
		}
	}
}
.sswps-card-button {
	font-size: 16px;
	text-align: left;
	font-weight: 700;
	font-family: $font-family_1;
	color: $color_5;
	background-color: $background-color_4;
	border-radius: 3px;
	border-width: 0px;
	line-height: 23px;
	padding: 8px 18px;
	display: inline-block;
	cursor: pointer;
	&:hover {
		text-decoration: none;
		border: none;
	}
	&:active {
		text-decoration: none;
		border: none;
	}
}
.primary-button {
	font-size: 16px;
	text-align: left;
	font-weight: 700;
	font-family: $font-family_1;
	color: $color_5;
	background-color: $background-color_4;
	border-radius: 3px;
	border-width: 0px;
	line-height: 23px;
	padding: 8px 18px;
	display: inline-block;
	cursor: pointer;
}
.sib-form-button {
	margin-left: 5px;
	background-color: $background-color_5;
}
.sswps-main__row.justify-content-start {
	justify-content: start;
}
.cards-container {
	margin-top: 20px;
}
.navigation {
	display: flex;
	align-items: center;
	padding: 10px;
	box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
	.navigation-tabs {
		margin-left: 15px;
		text-decoration: none;
		a {
			padding: 10px 15px;
			color: $color_1;
			text-decoration: none;
			font-size: 16px;
		}
		a.active {
			font-weight: 500;
		}
	}
	.stripe-logo {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		img {
			max-width: 60px;
		}
	}
}
.sswps-loader {
	display: flex;
	justify-content: center;
	position: relative;
	width: 30px;
	height: 30px;
	top: 0;
	left: -30px;
	box-sizing: border-box;
	transform: scale(.65);
	position: absolute;
	div {
		box-sizing: border-box;
		display: block;
		position: absolute;
		box-sizing: border-box;
		width: 30px;
		height: 30px;
		border: 3px solid #000;
		border-radius: 50%;
		animation: sswps-loader 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		border-color: $border-color_1;
		&:nth-child(1) {
			animation-delay: -0.45s;
		}
		&:nth-child(2) {
			animation-delay: -0.3s;
		}
		&:nth-child(3) {
			animation-delay: -0.15s;
		}
	}
}
div.sswps-notice {
	display: flex;
	align-items: center;
	position: fixed;
	font-size: 14px;
	width: 300px;
	padding: 10px 20px;
	color: $color_3;
	right: 10px;
	bottom: 20px;
	border-radius: 3px;
	border: none;
	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
}
.sswps-notice.success {
	background: #43a047;
	span.dashicons {
		color: $color_6;
	}
}
.sswps-notice.error {
	background: #e22525;
	span.dashicons {
		color: $color_7;
	}
}
.sswps-notice {
	span.dashicons {
		width: 20px;
		height: 20px;
		background: #fff;
		border-radius: 10px;
		margin-right: 10px;
	}
	div.dismiss {
		flex: 1;
		text-align: right;
		cursor: pointer;
		margin-left: 5px;
	}
	span.dashicons-dismiss {
		margin: 0;
	}
}
@media (max-width: 670px) {
	.sswps-main__card {
		flex: 0 0 100%;
		max-width: 300px;
	}
	.sswps-main__logo {
		width: 100px;
		margin: 0;
	}
	.sswps-main__header.welcome-header {
		align-items: start;
	}
	.sswps-main__header {
		.description {
			text-align: left;
		}
	}
}