@import './settings.scss';

.button.button-large.simpay-button-large {
	font-size: 14px;
	line-height: 30px;
	padding: 4px 12px;
}

.simpay-copy-hidden-input {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.fixed .column-livemode {
	width: 15%;
	text-align: right;

	@media screen and (max-width: 782px) {
		text-align: left;
	}

	.simpay-badge {
		margin-top: 3px;
	}
}

.fixed .column-shortcode {
	width: 25%;

	.simpay-shortcode {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
}

.post-type-simple-pay {

	// Hide post type UI.
	.misc-pub-curtime,
	.misc-pub-visibility {
		display: none;
	}
}

.simpay-metabox-title {
	border: 1px solid #eee;
}

.simpay-shortcode-section {
	border-top: 1px solid #ddd;
	border-width: 1px 0;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;

	label {
		display: block;
		margin-bottom: 6px;

		.dashicons {
			color: #8c8f94;
			margin-right: 3px;
		}
	}

	.simpay-copy-button {
		line-height: normal;
		position: absolute;
		right: 20px;
		bottom: 20px;
		border: 0;
		background: none;
		box-shadow: none;
		padding: 0;

		&:hover {
			border: 0;
			background: none;
			box-shadow: none;
		}

		.dashicons {
			color: #3c434a;
		}
	}
}

.simpay-shortcode {
	width: 100%;
	padding: 8px;
	line-height: 1;
	margin: 0;
	height: 32px;
	resize: none;
}

/** Badge */
.simpay-badge {
	color: #3f3f46;
	text-align: center;
	line-height: 1;
	padding: 5px 7px;
	border-radius: 3px;
	background: #e4e4e7;
	border: 0;
	box-shadow: none;
	display: inline-flex;
	align-items: center;

	@at-root {
		button#{&} {
			cursor: pointer;

			&:hover {
				background: #d4d4d8;
			}
		}
	}

	&__icon {
		opacity: 0.80;
		margin: 2px 5px 0 0;
	}

	&--green {
		color: #0e6245;
		background: #cbf4c9;
	}

	&--yellow {
		color: #983705;
		background: #f8e5b9;
	}
}

.simpay-stripe-account-info {
	display: flex;
	align-items: center;
	margin-bottom: 8px;

	.spinner {
		float: none;
		margin-top: 0;
		margin-left: 0;
	}
}

.post-type-simple-pay .simpay-settings-upgrade {
	padding: 25px 20px 30px;
	position: relative;

	&__inner {
		text-align: center;
		max-width: 750px;
		margin: 0 auto;
	}

	h3,
	h4 {
		line-height: 1;
		margin: 1rem 0;
	}

	h4 {
		color: #428bca;
		font-size: 18px;
	}

	h3 {
		font-size: 26px;
	}

	ul {
		max-width: 550px;
		margin: 25px auto 13px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	li {
		font-size: 15px;
		text-align: center;
		margin-bottom: 12px;
		width: 100%;

		@media screen and (min-width: 782px) {
			text-align: left;
			width: 50%;
		}
	}

	.button.button-large {
		font-size: 17px;
		line-height: 30px;
		padding: 10px 20px;
	}

	small {
		color: #666;
		margin: 15px 0 0;
		display: block;
	}

	.dashicons {
		color: #428bca;
	}

	.button-link {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20px;
		color: #666;
		font-weight: bold;
		text-decoration: none;
		margin-left: 5px;
		padding: 6px 10px;
		z-index: 2;

		&:hover,
		&:active,
		&:focus {
			color: #666;
			text-decoration: none;
		}
	}
}

// Form settings tabs/pages
#simpay-payment-form-settings {

	table {
		width: 100%;
		border-collapse: collapse;
	}

	::-webkit-input-placeholder {
		color: #9ba1a9;
	}

	::-moz-placeholder {
		color: #9ba1a9;
		opacity: 1;
	}

	:-ms-input-placeholder {
		color: #9ba1a9;
	}

	// inside is applied to the outermost wrapper of post metaboxes
	// generated by WordPress
	.inside {
		margin: 0;
		padding: 0;
	}

	.simpay-panel-field .toolbar {
		margin-bottom: -4px;

		.simpay-field-select {
			margin: 0 0 4px;
			width: auto;
			max-width: 70%;
		}
	}

	// simpay-tabs is the class for the metabox tabs ul element in the form settings
	.simpay-tabs {
		margin: 0;
		padding: 0;
		list-style: none;
		background: #fafafa;
		border-right: 1px solid #ccd0d4;
		line-height: 1em;
		position: relative;
		flex: 0 0 25%;

		@media screen and (max-width: 782px) {
			flex-basis: 100%;
			flex-grow: 1;
			border-right: 0;
		}

		li {
			margin: 0;
			padding: 0;

			&:last-child {
				margin-bottom: 20px;

				@media screen and (max-width: 782px) {
					margin-bottom: 0;
				}
			}

			&.active {

				a {
					padding-left: 14px;
					font-weight: bold;
					background-color: #fff;
					position: relative;
					box-shadow:
						inset 4px 0 currentColor,
						inset 0 -1px 0 #fff,
						0 1px 1px rgba(0, 0, 0, 0.04);
					margin-right: -1px;

					@media screen and (max-width: 782px) {
						margin-right: 0;
					}
				}
			}

			.simpay-tab-item {
				border-bottom: 1px solid #ccd0d4;
				display: flex;
				align-items: center;
				line-height: 20px;
				margin: 0;
				padding: 10px;
				text-decoration: none;
				transition: all 0.05s ease-in-out;

				svg,
				.dashicons {
					margin-right: 6px;
				}

				@media screen and (max-width: 782px) {
					padding: 18px;
				}

				&:focus {
					outline: 0;
					position: relative;
					z-index: 2;
					box-shadow: inset 0 0 0 2px currentColor;
				}
			}

			&:not(.active) {

				.simpay-tab-item {
					color: inherit;
				}
			}
		}
	} // end .simpay-tabs

	// simpay-panels-wrap is the main wrapper we use around the tabs and metabox content where the form settings are output
	.simpay-panels-wrap {
		background: #fff;
		display: flex;

		@media screen and (max-width: 782px) {
			flex-direction: column;
		}
	}

	.simpay-panels {
		flex: 0 0 75%;
		display: flex;

		@media screen and (max-width: 782px) {
			flex-basis: 100%;
		}
	}

	.simpay-panel,
	.simpay-panel-section {
		width: 100%;
	}

	.simpay-panel {

		> table {

			&,
			> tbody,
			> thead {

				&,
				> tr {
					display: block;
					width: 100%;
				}
			}
		}
	}

	// simpay-panel-field is the wrapping tr element for each setting field on the form settings pages
	.simpay-panel-field {

		&,
		> td,
		> th {
			text-align: left;
			display: block;
		}

		> td,
		> th {
			width: calc(100% - 36px);
			margin-left: 18px;
			margin-right: 18px;
		}

		th {
			font-weight: bold;
			padding-top: 18px;
			padding-bottom: 5px;
		}

		td {
			border-bottom: 1px solid #dddddd;
			padding-bottom: 18px;
		}

		p.description {
			margin-top: 4px;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		.simpay-panel-field__nested {
			margin-top: 18px;

			label {
				font-weight: bold;
				display: block;
				margin-bottom: 4px;
			}
		}

		.simpay-field-select,
		.simpay-field-text {
			min-width: 75%;
			max-width: 100%;

			@media screen and (max-width: 782px) {
				min-width: 0;
				width: 100%;
			}
		}

		.simpay-field-textarea {
			width: 100%;
			max-width: 100%;
		}

		.notice {

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		// Validation error labels, important admin text
		.error,
		.simpay-important {
			color: #a94442;
			font-weight: normal;
		}

		// Image preview
		.simpay-image-preview-wrap {
			position: relative;
			margin-top: 12px;

			// Resize & position remove icon to top-left corner of image.
			.simpay-remove-image-preview {
				position: absolute;
				top: -15px;
				left: -15px;
				cursor: pointer;
				background-color: #fff;

				&::before {
					font-size: 22px;
					line-height: 26px;
				}
			}

			.simpay-image-preview {
				max-height: 128px;
				max-width: 128px;
				border: 1px solid #ddd;
			}
		}

	} // end .simpay-panel-field

	// simpay-panel is the main wrapper for all of our form settings
	.simpay-panel {

		&.simpay-panel--has-help {
			padding-bottom: 48px;
		}

		// Promo under payment form settings
		.simpay-promo-under-box {
			background-color: #f4f4f4;
			border: 1px solid #e5e5e5;
			padding: 18px;
			margin-top: 18px;
			position: relative;

			&__dismiss {
				color: inherit;
				text-decoration: none;
				position: absolute;
				top: 8px;
				right: 8px;

				.dashicons-dismiss {
					font-size: 16px;
					width: 16px;
					height: 16px;
				}
			}

			h3 {
				font-size: 18px;
				font-weight: 600;
				margin: 0;
				padding: 0;
			}

			p {
				font-size: 14px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

	} // end .simpay-panel

	.simpay-show-if,
	.simpay-panel-hidden {
		display: none;
	}
}

// Styles that apply to both global & form/CPT settings pages
#simpay-global-settings,
#simpay-form-settings {

	.sortable-placeholder {
		margin: 5px;
		display: block;
		min-height: 36px;
	}

	// There is an issue with Chosen not having a width when elements are hidden to begin with so we set one here explicitly
	.chosen-container {
		min-width: 20em;
		max-width: 30em;
	}

	// simpay-field is applied to all settings input elements
	.simpay-field {

		&.simpay-small-text {
			width: 7em;
		}

		&.simpay-medium-text {
			width: 15em;
		}

		// In lieu of .simpay-large-text, use
		// WP core's "regular-text" class, which is 25em width.

	} // end .simpay-field

	// specifically radio input fields
	.simpay-field-radios {

		ul {
			margin: 0;
		}

		> i {
			margin-left: 5px;
			vertical-align: middle;
		}
	}

	// for radio fields that should be displayed inline
	ul.simpay-field-radios-inline {
		margin: 0 0 -10px;

		li {
			display: inline-block;
			margin: 0 10px 10px 0;

			&:last-child {
				margin-right: 0;
			}
		}
	} // end .simpay-field-radios-inline

	.simpay-currency-field {
		display: flex;
		align-items: center;

		> &:focus {
			position: relative;
			z-index: 5;
		}
	}

	// Common attributes for both left and right positioned currency symbols
	.simpay-currency-symbol {
		margin: 0;
		padding-left: 8px;
		padding-right: 8px;
		line-height: 28px;
		font-size: 14px;

		@media screen and (max-width: 782px) {
			line-height: 38px;
		}

		&-left {

			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&-right {

			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}

	div.simpay-currency-symbol {
		border-color: #7e8993;
		border-style: solid;
		background-color: #fff;
	}

	select.simpay-currency-symbol {
		padding-right: 25px;
	}

	// Specific styles for the left currency symbol
	.simpay-currency-symbol-left {
		border-width: 1px 0 1px 1px;

		+ .simpay-field-amount {

			border-radius: 0 4px 4px 0;
		}
	}

	// Specific styles for the right currency symbol
	.simpay-currency-symbol-right {
		border-width: 1px 1px 1px 0;
	}

	// Amount input
	.simpay-field-amount {
		margin: 0;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 14px;
		width: 6em;
		position: relative;
		z-index: 2;
		border-radius: 0;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	// Error messages
	.simpay-error {
		color: #f00;
	}

	// Docs links
	.simpay-docs-link-wrap {

		position: absolute;
		right: 0;
		bottom: 0;
		color: #666;
		font-size: 13px;
		font-style: italic;
		padding: 15px 18px;

		a {

			.dashicons-editor-help {
				color: #666;
				text-decoration: none;
				width: 17px;
				height: 17px;
				font-size: 17px;
				padding-left: 4px;
			}
		}
	}

	.simpay-docs-icon {
		color: #666;

		&,
		.dashicons-editor-help {
			text-decoration: none;
			width: 17px;
			height: 17px;
			font-size: 17px;
		}
	}
}

// Pro or account upgrade link button
.button.button-primary.simpay-upgrade-btn {
	background-color: #428bca;
	border: 1px solid #428bca;
	color: #fff;
	display: inline-block;

	&:focus {
		box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2d6ca2;
	}

	&:hover {
		background-color: #037ad0;
		border: 1px solid #428bca;
	}
}

.simpay-upgrade-btn-subtext {
	font-size: 14px;
	color: green;
	margin-top: 5px;
}

.post-type-simple-pay {

	#post-body-content {
		display: none;
	}
}

/**
 * Generic card.
 */
.simpay-card {
	margin: 0 0 20px;
	padding: 30px;
	background: #fff;
	border: 1px solid #c3c4c7;
	box-shadow: 0 1px 1px rgb(0 0 0 / 4%);

	&,
	p {
		line-height: 1.5;
		font-size: 16px;
	}

	h3 {
		line-height: 1.6;
		font-size: 18px;
		margin: 0 0 20px;
		color: #23282C;
	}

	p {
		margin: 0 0 20px;
	}

	p,
	ul {
		&:last-child {
			margin-bottom: 0;
		}
	}

	figure {
		float: right;
		margin: 0 0 30px 30px;
		max-width: 400px;

		iframe,
		img {
			max-width: 100%;
		}

		figcaption {
			text-align: center;
		}

		@media screen and (max-width: 782px) {
			margin: 0 0 30px;
			max-width: 100%;
			float: none;
		}
	}
}

/**
 * Docs list
 */
.simpay-doc-suggestions {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.simpay-doc-suggestion {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 0 1 33.333%;
	padding: 30px;
	border-right: 1px solid #c3c4c7;
	box-sizing: border-box;

	&:nth-child(3n) {
		border-right: 0;
	}

	@media screen and (max-width: 782px) {
		flex: 0 1 100%;
		border-bottom: 1px solid #c3c4c7;
		border-right: 0;

		&:last-child {
			border-bottom: 0;
		}
	}

	h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	p {
		font-size: 15px;
	}

	.dashicons {
		font-size: 40px;
		width: 40px;
		height: 40px;
		display: block;
		margin-bottom: 10px;
	}

	.button-large {
		font-size: 16px;
	}
}

/**
 * Addons
 */
.simpay-addons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}

.simpay-addon {
	background: #fff;
	border: 1px solid #c3c4c7;
	box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	flex-basis: calc(33% - 10px);
	box-sizing: border-box;

	@media screen and (max-width: 782px) {
		flex-basis: 100%;
	}

	img {
		float: left;
		max-width: 75px;
	}

	h5 {
		margin: 0 0 10px 100px;
		font-size: 16px;
	}

	&__details {
		padding: 20px;
		flex: 1 0 auto;
	}

	&__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 1 auto;
		background-color: #f7f7f7;
		border-top: 1px solid #ddd;
		margin-top: auto;
		padding: 20px;
		position: relative;

		.msg {
			text-align: center;
			justify-content: center;
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #f7f7f7;
			z-index: 3;
		}
	}

	.error,
	.status-label.status-installed {
		color: #d63638;
	}

	.success,
	.status-label.status-active {
		color: #00a32a;
	}

	.addon-desc {
		margin: 0 0 0 100px;
	}
}


// Stripe Connect help information.
.form-table td .simpay-stripe-connect-help {
	margin: 15px 0;
	display: flex;
	align-items: center;

	.dashicons {
		margin-right: 4px;
	}
}

.simpay-system-status-report-panel {

	margin: 20px 0;

	thead th {
		font-weight: bold;
	}

	tbody td,
	thead th {
		font-size: 14px;
		vertical-align: top;
	}

	tbody {

		.label {
			width: 30%;
		}

		tr:nth-child(odd) td {
			background-color: rgba(0, 0, 0, 0.02);
		}

	}

	dl {
		margin: 0;
		padding: 0;
	}

	dt {

		float: left;
		font-style: italic;
		margin: 0 4px 0 0;

	}

	dd {
		margin: 0;
	}

	mark {

		background-color: transparent;
		font-weight: bold;

		&.ok {
			color: green;
		}

		&.error {
			color: red;
		}

		&.warning {
			color: #ffb900;
		}
	}

}

.simpay-currency-field {
	display: flex;
	align-items: center;

	> &:focus {
		position: relative;
		z-index: 5;
	}
}

// Common attributes for both left and right positioned currency symbols
.simpay-currency-symbol {
	margin: 0;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 28px;
	font-size: 14px;

	@media screen and (max-width: 782px) {
		line-height: 38px;
	}

	&-left {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	&-right {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
}

div.simpay-currency-symbol {
	border-color: #7e8993;
	border-style: solid;
	background-color: #fff;
}

select.simpay-currency-symbol {
	padding-right: 25px;
}

// Specific styles for the left currency symbol
.simpay-currency-symbol-left {
	border-width: 1px 0 1px 1px;

	+ .simpay-field-amount {

		border-radius: 0 4px 4px 0;
	}
}

// Specific styles for the right currency symbol
.simpay-currency-symbol-right {
	border-width: 1px 1px 1px 0;
}

// Amount input
.simpay-field-amount {
	margin: 0;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 14px;
	width: 6em;
	position: relative;
	z-index: 2;
	border-radius: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

/**
 * Screen Options
 */
.post-php.post-type-simple-pay {

	#screen-meta-links {
		display: none;
	}
}

.edit-php.post-type-simple-pay .metabox-prefs {

	label:first-of-type {
		display: none;
	}
}

/**
 * Page branding bar
 */
.simpay-branding-bar {
	margin-left: -20px;
	padding: 14px 20px 14px 22px;
	background: #fff;
	border-bottom: 1px solid #c3c4c7;
	box-shadow: 0 1px 1px rgb(0 0 0 / 4%);

	&__title {
		display: flex;
		align-items: center;
	}

	&__logo {
		width: 180px;
		margin-bottom: 12px;
	}

	&__divider {
		color: #dadbdf;
		font-size: 23px;
		font-weight: 400;
		margin: 0 15px;
	}

	.wp-heading-inline {
		font-size: 23px;
		font-weight: 400;
		margin: 0;
	}

	.page-title-action {
		font-weight: 600;
		font-size: 13px;
		line-height: normal;
		cursor: pointer;
		text-shadow: none;
		text-decoration: none;
		margin-left: 10px;
		padding: 4px 8px;
		border: 1px solid currentColor;
		border-radius: 2px;
		background: #f6f7f7;
	}
}

/**
 * "Landing zone"
 */
.simpay-landing-zone {
	text-align: center;
	max-width: 700px;
	margin: 40px auto;

	&__title {
		font-size: 26px;
		font-weight: 600;
		margin: 0 0 1.5rem;
		padding: 0;
	}

	&__subtitle {
		font-size: 17px;
		color: #666;
		margin: 0.25rem 0;

		strong {
			color: #444;
		}
	}

	section {
		margin: 2rem 0;
	}

	&__empty-state-graphic {

		img {
			width: 425px;
		}
	}

	&__screenshot {
		& > * {
			vertical-align: middle;
		}

		&-img {
			display: inline-block;
			position: relative;
			width: 315px;
			padding: 5px;
			background-color: #ffffff;
			box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
			border-radius: 3px;

			img {
				max-width: 100%;
				display: block;
			}

			.hover {
				position: absolute;
				opacity: 0;
				height: calc(100% - 10px);
				width: calc(100% - 10px);
				top: 0;
				left: 0;
				border: 5px solid #ffffff;
				background-color: rgba(0,0,0,0.15);
				background-image: url('../../images/smtp/zoom.svg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 50px;
				transition: all 0.3s;
			}

			&:hover .hover {
				opacity: 1;
				transition: all 0.3s;
			}
		}

		ul {
			text-align: left;
			display: inline-block;
			margin: 0 0 0 30px;
			list-style-type: none;
			max-width: calc(100% - 350px);

			@media screen and (max-width: 782px) {
				text-align: center;
				margin: 30px auto;
				max-width: 100%;
				display: block;
			}
		}

		li {
			margin: 16px 0;
			padding: 0;
			font-size: 15px;
			color: #777777;
			position: relative;

			&:before {
				content: '';
				background-image: url('../../images/smtp/arrow-right.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 14px;
				width: 14px;
				height: 14px;
				display: inline-block;
				margin: -3px 5px 0 0;
				vertical-align: middle;
			}
		}
	}

	.button.button-large {
		font-size: 17px;
		line-height: 30px;
		padding: 10px 20px;
	}
}

/**
 * Teasers
 */
.simpay-teaser-float {
	margin: 50px;
	position: relative;

	&__card {
		text-align: center;
		padding: 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 0 30px 15px rgb(0 0 0 / 18%);
		position: relative;
		z-index: 2;
	}

	#poststuff & h2,
	h2 {
		font-size: 24px;
		font-weight: 600;
		margin: 0;
		padding: 0;
	}

	p {
		font-size: 15px;
		line-height: 1.35;
		color: #666;

		strong {
			color: #444;
		}
	}

	ul {
		text-align: left;
		display: inline-block;
		margin: -10px 0 20px;
		list-style-type: none;
	}

	li {
		margin: 16px 0;
		padding: 0 0 0 24px;
		font-size: 15px;
		background-image: url('../../images/smtp/arrow-right.svg');
		background-position: left 3px;
		background-repeat: no-repeat;
		background-size: 14px;
		color: #777777;
	}

	.button.button-large {
		font-size: 17px;
		line-height: 30px;
		padding: 10px 20px;
	}

	.simpay-notice-dismiss {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20px;
		color: #666;
		font-weight: bold;
		text-decoration: none;
		margin-left: 5px;
		padding: 6px 10px;
		z-index: 2;

		&:hover,
		&:active,
		&:focus {
			color: #666;
			text-decoration: none;
		}
	}

	&:after,
	&:before {
		opacity: 0.75;
		z-index: 0;
		content: '';
		position: absolute;
		left: -30px;
		right: -30px;
		top: -35px;
		width: calc(100% + 60px);
		height: 170px;
		background-image:
			linear-gradient(#ddd, #ddd),
			linear-gradient(#eee, #eee),
			linear-gradient(#ddd, #ddd),
			linear-gradient(#eee, #eee);
		background-repeat: no-repeat;
		background-size:
			100% 20px,
			100% 40px,
			100% 20px,
			100% 40px;
		background-position:
			0 0,
			0 30px,
			0 100px,
			0 130px;
	}

	&:before {
		top: 170px;
	}

	&--inline {
		margin: 40px 30px 30px;

		.simpay-teaser-float__card {
			padding: 22px;
			box-shadow: 0 0 12px 6px rgb(0 0 0 / 16%);
		}

		#poststuff & h2,
		h2 {
			font-size: 18px;
		}

		p {
			font-size: 14px;
			margin: 0.50rem 0 0.75rem;
		}

		.button.button-large {
			font-size: 15px;
			line-height: 24px;
			padding: 8px 14px;
		}

		&:before,
		&:after {
			opacity: 0.60;
		}

		&:before {
			display: none;
		}

		&:after {
			top: 15px;
		}
	}
}

/**
 * Lity adjustments.
 */
.post-type-simple-pay {

	.lity {
		z-index: 999999999;
		padding: 20px;
	}

	.lity-close {
		margin: 10px;
	}

	.lity-content {
		max-width: 80vw;
		max-height: 80vh;

		img {
			max-height: 80vh !important;
			max-width: 80vw !important;
		}
	}
}

/*
 * Stripe Connect
 */

#wpsp-api-keys-row-hide {
	display: none;
}

.wpsp-stripe-connect {
	display: inline-block;
	margin-bottom: 1px;

	background-image: -webkit-linear-gradient(#28a0e5, #015e94);
	background-image: -moz-linear-gradient(#28a0e5, #015e94);
	background-image: -ms-linear-gradient(#28a0e5, #015e94);
	background-image: linear-gradient(#28a0e5, #015e94);

	-webkit-font-smoothing: antialiased;
	border: 0;
	padding: 1px;
	height: 30px;
	text-decoration: none;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

	cursor: pointer;

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	span {
		display: block;
		position: relative;
		padding: 0 12px 0 44px;
		height: 30px;

		background: #1275ff;
		background-image: -webkit-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
		background-image: -moz-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
		background-image: -ms-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
		background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);

		font-size: 14px;
		line-height: 30px;
		color: white;
		font-weight: bold;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);

		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 11px;
			top: 50%;
			width: 23px;
			height: 24px;
			margin-top: -12px;
			background-repeat: no-repeat;
			background-size: 23px 24px;
		}
	}

	&:active {
		background: #005d93;

		span {
			color: #eee;

			background: #008cdd;
			background-image: -webkit-linear-gradient(#008cdd, #008cdd 85%, #239adf);
			background-image: -moz-linear-gradient(#008cdd, #008cdd 85%, #239adf);
			background-image: -ms-linear-gradient(#008cdd, #008cdd 85%, #239adf);
			background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);

			-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
			box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
		}
	}

	span::before,
	&.blue span::before {
		background-image: url("data:image/png;base64, ");
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

	.wpsp-stripe-connect span::before,
 .wpsp-stripe-connect.blue span::before {
		background-image: url("data:image/png;base64, ");
	}
}

/* End of Stripe Connect */

