.wp-block-lsx-blocks-lsx-team,
.lsx-team-block {
	.spinner {
		float: none;
		margin: 6px 2px 10px 0;
	}
	> .row {
		display: flex;
		flex-flow: wrap;
		&.slick-slide {
			display: flex;
			flex-wrap: wrap;
		}
	}

	.lsx-team-slot {
		padding: 15px;
		.lsx-team-avatar {
			height: auto;
			width: auto;
			border-radius: initial;
			img {
				border-radius: 50%;
				display: block;
				height: auto;
				margin: 0 auto 1rem;
				width: 170px;
				height: 170px;
				overflow: hidden;
				object-fit: cover;
				border: none;
				background-color: transparent;
			}
			&.square {
				border-radius: 0;
				img {
					border-radius: 0;
				}
			}
		}
		.lsx-team-description {
			.moretag {
				display: none;
			}
		}
		.lsx-team-email {
			display: block;
		}
	}
	&.block-template-list {
		.lsx-team-slot {
			width: 100%;
			@media (min-width: 968px) {
				display: flex;
			}
			@media (max-width: 967px) {
				max-width: 400px;
				margin-left: auto;
				margin-right: auto;
			}
			.entry-profile-wrapper {
				padding: 2.4rem;
			}

			.lsx-team-avatar {
				@media (min-width: 968px) {
					flex-grow: 2;
					width: 100%;
				}
				padding: 0;
				margin: 0;
				&.square {
					img {
						height: 100%;
						width: 100%;
						padding: 0;
						margin: 0;
					}
				}
				&.circle {
					@media (max-width: 967px) {
						padding-top: 1rem;
					}
					display: flex;
					align-items: center;
				}
			}
			.entry-layout-wrapper {
				padding: 2.4rem 15px;
				text-align: left;
				padding-left: 4rem;
				word-break: break-word;
				@media (min-width: 968px) {
					flex-grow: 5;
					width: 70%;
					display: flex;
					padding-left: 2.4rem;
				}
				.entry-layout-content {
					@media (min-width: 968px) {
						flex-grow: 5;
						width: 70%;
					}
					min-height: 170px;
					padding-right: 4rem;
					* {
						max-width: 100%;
					}
				}
				.lsx-team-job-title {
					display: inline;
					font-size: 24px;
				}
				.lsx-team-name {
					font-size: 30px;
				}
				.entry-layout-meta {
					flex-grow: 2;
					width: 30%;
					> * {
						position: relative;
						display: flex;
						&:before {
							color: inherit;
							display: inline-block;
							font-family: "FontAwesome";
							font-size: inherit;
							left: -2rem;
							position: absolute;
							text-rendering: auto;
							color: #919191;
							font-weight: 100;
						}
					}
					.lsx-to-meta-data-key {
						@media (max-width: 967px) {
							margin-left: 2rem;
						}
						font-size: 13px;
						font-weight: 600;
						&:before {
							content: "\f0c0";
						}
					}
					.lsx-team-job-title {
						margin-top: 0;
					}
					.lsx-team-email {
						@media (max-width: 967px) {
							margin-left: 2rem;
						}
						&:before {
							content: "\f0e0";
						}
					}
					.lsx-team-socials {
						@media (max-width: 967px) {
							margin-left: 2rem;
						}
						margin-left: -2rem;
						margin-top: 1rem;
						li {
							padding-left: 0;
							padding-right: 1rem;
						}
					}
				}
			}
		}
	}
}

.wp-block-lsx-blocks-lsx-team {
	&.is-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-gap: 0 2em;

		article {
			margin-bottom: 2.5em;
			background-color: #fff;
		}
	}

	&.is-grid.columns-2 {
		grid-template-columns: 1fr 1fr;
	}

	&.is-grid.columns-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	&.is-grid.columns-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	&.is-grid.columns-5 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}

	&.is-grid.columns-6 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	&div[class*="columns"].is-grid {
		@media only screen and (max-width: 600px) {
			grid-template-columns: 1fr;
		}
	}
	article {
		&.has-thumb,
		&.no-thumb {
			img {
				&.circle {
					border-radius: 50%;
					width: 170px;
					height: 170px;
					min-width: 170px;
					min-height: 170px;
					overflow: hidden;
					object-fit: cover;
				}
				&.square {
					border-radius: 0;
				}
			}
		}
		.lsx-team-description {
			margin-top: 2rem;
			.lsx-team-name {
				margin: 5px;
				color: #333;
				text-decoration: none;
				font-weight: 500;
				font-size: 20px;
				line-height: 1.3;
				a {
					color: #333;
					text-decoration: none;
				}
			}
			.lsx-team-job-title, .lsx-team-team-role {
				color: $textgray;
			}
			.lsx-team-team-role {
				display: block;
			}
			.lsx-block-post-grid-excerpt {
				p {
					margin: 0;
				}
			}
			.team-social {
				display: flex;
				list-style: none;
				margin-bottom: 0;
				justify-content: center;
				li {
					padding: 0 1rem;
				}
				i {
					font: normal normal normal 14px/1 FontAwesome;
				}
			}
			.lsx-team-email {
				display: block;
				text-decoration: none;
			}
			.lsx-team-show-more {
				display: block;
				text-decoration: none;
				line-height: 1.1;
				margin-top: 1rem;
				i {
					font: normal normal normal 14px/1 FontAwesome;
				}
			}
		}
	}
	&.is-list {
		article {
			margin-bottom: 4rem;
			&.has-thumb,
			&.no-thumb {
				@media (min-width: 968px) {
					display: flex;
				}
				.lsx-block-post-grid-image {
					margin-right: 2rem;
					@media (min-width: 968px) {
						flex-grow: 2;
						width: 30%;
					}
				}
				img {
					&.circle {
						width: 170px;
						height: 170px;
						min-width: 170px;
						min-height: 170px;
						overflow: hidden;
					}
				}
				.lsx-block-post-grid-text {
					text-align: left;
					margin-top: 0;
					@media (min-width: 968px) {
						width: 70%;
						flex-grow: 5;
					}
					.lsx-team-name {
						margin: 5px 0;
					}
				}
			}
		}
	}
}

@media (min-width: 768px) {
	.gutenberg-compatible-template.using-gutenberg
		.alignwide
		figure.lsx-team-avatar
		img,
	.gutenberg-compatible-template.using-gutenberg
		.alignfull
		figure.lsx-team-avatar
		img {
		height: 170px;
		width: 170px;
	}
}

.components-base-control.components-radio-control {
	.components-base-control__field {
		display: flex;
		.components-radio-control__option {
			margin-right: 2rem;
			margin-top: 3rem;
			.components-radio-control__input {
				position: relative;
				&:before {
					content: "";
					position: absolute;
					left: 0px;
					top: -3.5rem;
					height: 40px;
					width: 40px;
					background-repeat: no-repeat;
					border-radius: 0;
				}
				&[value="list"] {
					&:before {
						background-image: url(assets/images/icon-list.svg);
						top: -3.4rem;
					}
				}
				&[value="grid"] {
					&:before {
						background-image: url(assets/images/icon-grid.svg);
					}
				}
			}
		}
	}
}

.edit-post-settings-sidebar__panel-block {
	.components-panel__body {
		&.team-panel {
			.components-base-control:nth-of-type(2) {
				.components-base-control__field {
					.components-base-control__label {
						font-size: 0;
						&:after {
							content: "Roles";
							font-size: 13px;
						}
					}
				}
			}
		}
	}
}

div[data-type="lsx-blocks/lsx-team"] {
	.wp-block[data-align="full"] {
		max-width: initial;
	}
}