// Typography
$green: #27C110;
$red: #f00;
$btncolor: #212121;
$mainheading-size: 36px;
$mainheading-lineheight: 1.5;
$heading-size: 24px;
$heading-lineheight: 24px;

// Miscellaneous
$circle-size: 100px !default;
$breakpoint: 767px;

// Small Button Sizes
$button-sm-padding: 6px 10px !default;
$button-sm-font: 14px !default;
$button-sm-lineheight: 1.5 !default;

// Medium Button Sizes
$button-md-padding: 10px 20px !default;
$button-md-font: 16px !default;
$button-md-lineheight: 1.5 !default;

// Large Button Sizes
$button-lg-padding: 10px 24px !default;
$button-lg-font: 20px !default;
$button-lg-lineheight: 1.5 !default;

.wp-pros-cons {
	background: #F9F9F9;
	padding-top: 10px;
	padding-bottom: 10px;

	a {
		text-decoration: none;
	}

	.wp-pros-cons-heading {
		text-align: center;
		padding-bottom: 10px;
	}

	.wppc-boxs {
		display: grid;
		word-break: break-all;
		grid-template-columns: 50% 50%;
		.wppc-box {
			background: #fff;
			margin: 0 15px;
			border: 1px solid #eee;
			.wppc-header .wppc-content-title {
				margin: 0;
				padding: 0;
			}
		}
	}

	.wppc-box-symbol {
		width: $circle-size;
		height: $circle-size;
		position: relative;
		border-radius: 100%;
		margin: 0 auto;

		[class*="fa"] {
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			font-size: 26px;
			font-style: normal;
		}
	}

	.wppc-box-symbol img {
		width: 30px;
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.pros-content {
		.wppc-box-symbol {
			color: #fff;
			background: $green;
		}
	}

	.cons-content {
		.wppc-box-symbol {
			color: #fff;
			background: $red;
		}
	}

	ul.wp-pros-cons-list {
		list-style: none;
		margin: 0;
		padding: 0 20px;
		li {
			position: relative;
			margin: 10px 0;
			width: 100%;
			word-break: break-word;
			display: block;
			list-style-type: none;
			ul {
				margin-left: 20px;
				display: block;
				width: 100%;
			}
		}
	}
	ul.wp-pros-cons-list li:before {
		content: '';
		padding-right: 25px;
		background-size: 20px 20px;
		background-position: 1px;
		background-repeat: no-repeat;
	}

	.pros-content ul.wp-pros-cons-list li:before {
		background-image: url('../assets/icons/check-solid.svg');
	}

	.cons-content ul.wp-pros-cons-list li:before {
		background-image: url('../assets/icons/times-solid.svg');
	}

	.wppc-verdict-wrapper {
		margin: 30px;
		text-justify: inter-word;
	}

	.wppc-btn-wrapper {
		text-align: center;
		margin: 25px 0;
		display: flex;
		justify-content: center;
		flex-flow: column;
    	align-items: center;
		.wp-btn {
			box-shadow: none;
			font-size: 24px;
			line-height: 1.2;
			font-weight: 300;
			display: inline-block;
			text-decoration: none;
			&.wp-btn-sm{
				font-size: $button-sm-font;
				line-height: $button-sm-lineheight;
				padding: $button-sm-padding;
			}
			&.wp-btn-md{
				font-size: $button-md-font;
				line-height: $button-md-lineheight;
				padding: $button-md-padding;
			}
			&.wp-btn-lg{
				font-size: $button-lg-font;
				line-height: $button-lg-lineheight;
				padding: $button-lg-padding;
			}
			&:focus {
				background: darken($color: #212121, $amount: 0.5);
			}
		}
		.wppc-btn-icon {
			vertical-align: middle;
		}
		.wp-btn.wppc-icon-before {
			display: flex;
			flex-flow: row;
			justify-content: center;
		}
		.wp-btn.wppc-icon-after {
			display: flex;
			flex-flow: row-reverse;
			justify-content: center;
		}
		.wp-btn.wppc-icon-before .wppc-btn-icon {
			margin-right: 10px;
		}
		.wp-btn.wppc-icon-after .wppc-btn-icon {
			margin-left: 10px;
		}
	}
	&.wppc-view1 {
		.wppc-boxs {
			margin-top: calc(#{$circle-size} / 2);
			.wppc-header {
				margin-bottom: 20px;
				margin-top: calc(-#{$circle-size} / 2);
				text-align: center;
				.wppc-content-title {
					margin-top: 10px;
				}
			}
		}
	}
	&.wppc-view2 {
		background: transparent;
		.wppc-boxs .wppc-box {
			border-width: 2px;
			border-style: solid;
			border-radius: 4px;
		}
		.wppc-header {
			padding: 20px;
		}
		.pros-content {
			border-color: #00bf08;
			.wppc-header {
				background: #00bf08;
				color: #fff;
			}
		}

		.cons-content {
			border-color: red;
			.wppc-header {
				background: red;
				color: #fff;
			}
		}
	}
	&.wppc-view3 {
		background: transparent;
		.wppc-boxs .wppc-box {
			border-radius: 4px;
		}
		.wppc-header {
			padding: 20px;
		}
		.pros-content {
			.wppc-header {
				background: #00bf08;
				color: #fff;
			}
		}

		.cons-content {
			.wppc-header {
				background: red;
				color: #fff;
			}
		}
	}
}

// Editor specific styles
.wppc-box .components-autocomplete{
	position: relative;
	display: inline-block;
}

.wp-pros-cons .wppc-btn-wrapper .components-autocomplete {
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
}

.wp-pros-cons .editor-url-input {
	display: inline-block;
}

.wp-pros-cons .components-button {
	vertical-align: middle;
}