/**
 * Common styles
 * Loads on front end and back end
 */

// Variables
$black: #293038;
$testblack: #4a4a4a;
$blue: #418ad0;
$accent: #27639e;
$lightgray: #626e81;
$textgray: #919191;
$text_light: #777777;
$orange: #f7ae00;
$graybg: #f6f6f6;
$groupbg: #f2f2f2;

$lsx-gap: 2.4rem;
$lsx-medium-gap: 4.25rem;
$lsx-large-gap: 8.5rem;

/* Font size styles */
@media only screen and (min-width: 600px) {
	div[class*="wp-block-lsx"].lsx-font-size-14 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 14px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-15 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 15px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-16 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 16px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-17 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 17px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-18 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 18px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-19 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 19px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-20 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 20px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-21 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 21px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-22 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 22px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-23 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 23px;
		}
	}

	div[class*="wp-block-lsx"].lsx-font-size-24 {
		&.lsx-block-testimonial p,
		&.lsx-block-notice p,
		&.lsx-block-profile p,
		&.lsx-block-accordion p,
		&.lsx-block-cta p {
			font-size: 24px;
		}
	}
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

@media only screen and (min-width: 600px) {
	.wp-block-columns .layout-column-1,
	.wp-block-columns .layout-column-2 {
		margin-right: 5%;
	}
}

.wp-block-image {
	margin-bottom: 1.2em;
}

.lsx-text-link {
	color: inherit;
	box-shadow: 0 -1px 0 inset;
	text-decoration: none;
	transition: 0.3s ease;

	&:hover {
		color: inherit;
		box-shadow: 0 -2px 0 inset;
		color: $accent;
	}
}

article {
	.lsx-button {
		font-weight: 700;
		text-transform: uppercase;
		&:active {
			left: 2px;
			top: 2px;
			position: relative;
		}
	}
}

//Pullquote
.wp-block-pullquote,
.wp-block-quote {
	border: none;
	padding: 0;
	margin-bottom: 4.25rem;
	max-width: 585px !important;
	margin: 6rem 0;
	blockquote {
		cite {
			text-transform: initial;
		}
	}
	&.alignwide {
		max-width: 75%;
	}
	&.alignfull {
		max-width: 100%;
	}
	&.alignleft,
	&.alignright {
		padding: 0 4.25rem;
		max-width: 50%;
	}
	&.alignleft {
		padding-left: 10%;
	}
	&.alignright {
		padding-right: 10%;
	}
	@media (max-width: 767px) {
		&.alignleft,
		&.alignright {
			max-width: 80%;
			width: 80%;
			padding: 0;
		}
	}
}
.block-editor {
	.wp-block-pullquote,
	.wp-block-quote {
		border: 1px solid #dadddf;
		border-radius: 10px;
		font-size: 16px;
		padding: 4rem 4rem 2.4rem;
		&:before {
			border-radius: 50%;
			content: "”";
			font-style: normal;
			left: 50%;
			line-height: 1.375;
			overflow: hidden;
			position: absolute;
			transform: translateX(-50%);
			height: 30px;
			top: -15px;
			width: 30px;
			font-size: 32px;
			background-color: #f6f6f6;
			color: #d84e2e;
			text-align: center;
		}
	}
}

.lsx-page-title-panel,
.lsx-page-banner-panel {
	.lsx-panel-row {
		margin-bottom: 15px;

		.lsx-col-2 {
			width: 49%;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
		}

		.lsx-col-3 {
			display: inline-block;
			width: 32%;
			vertical-align: middle;
			text-align: center;
		}

		.lsx-col-2,
		.lsx-col-3 {
			&:first-child {
				text-align: start;
			}

			&:last-child {
				text-align: end;
			}

			.components-toolbar {
				border: 0px solid #e2e4e7;
			}
		}

		&.background-colour {
			.components-panel__body {
				padding-left: 0px;
				border: 0;

				.components-panel__body-title {
					height: 1px;
					overflow: hidden;
					margin-top: 5px;
				}
			}
		}

		.components-radio-control__option {
			margin-right: 0.5rem !important;
			margin-top: 1rem !important;

			.components-radio-control__input::before {
				display: none;
			}
		}

		.button {
			&.media-button {
				border: 1px dashed #a2aab2;
				background-color: #edeff0;
				min-height: 90px;
				line-height: 20px;
				padding: 8px 0;
				text-align: center;
				width: 100%;
				color: #1e1e1e;
			}
			&.media-button-remove {
				padding: 0;
				border: 0px dashed #a2aab2;
				min-height: auto;
				height: auto;
				border-radius: 0px;
				color: #d94f4f;
				background-color: white;
				text-decoration: underline;

				&:hover {
					color: #00a0d2;
				}
			}
		}
	}
}

.lsx-panel-row {
	.lsx-page-title-label {
		margin-left: 10px;
		vertical-align: bottom;
	}
}

.lsx-hero-banner-block {
	background-color: #2b3840;
	margin-bottom: 4.25rem;
	.gutenberg-compatible-template.using-gutenberg.single-post & {
		margin-bottom: 4.25rem;
	}
	.lsx-title-block {
		h1 {
			margin-bottom: 0;
		}
	}
}

body.banner-disabled {
	&.single {
		#primary.content-area {
			margin-top: 50px;
		}

		article {
			.entry-content {
				margin-top: 0px;
				padding-top: 0px;
			}
		}
	}
}