@import 'dashicons';

html,
body {
	padding: 0;
	margin: 0;
}

body {
	font-family: sans-serif;
}

/* Embed HTML popup */
.pe-embed-share-dialog {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #1d2327;
	background-color: rgba(0,0,0,.9);
	color: #fff;
	opacity: 1;
	transition: opacity .25s ease-in-out;

	&.hidden {
	  opacity: 0;
	  visibility: hidden;
	}

	.pe-embed-share-dialog-content {
		height: 100%;
		transform-style: preserve-3d;
		overflow: hidden;

		.pe-embed-share-dialog-close {
		  position: absolute;
		  top: 20px;
		  right: 20px;
		  font-size: 22px;

			.dashicons {
			  height: 24px;
			  width: 24px;
			  background-size: 24px;
			}
		}

		/* WP and HTML embed tabs & content */
		.pe-embed-share-dialog-text {
		  margin-top: 25px;
		  padding: 20px;

			/* WP and HTML embed content */
			.pe-embed-share-tab {

				&[aria-hidden="true"] {
				  display: none;
				}

				.pe-embed-share-input {
					box-sizing: border-box;
					width: 100%;
					border: none;
					height: 28px;
					margin: 0 0 10px;
					padding: 0 5px;
					font-size: 14px;
					font-weight: 400;
					font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
					line-height: 1.5;
					resize: none;
					cursor: text;
				}

				textarea.pe-embed-share-input {
					height: 72px;
				}

				p.pe-embed-share-description {
					margin: 0;
					font-size: 14px;
					line-height: 1;
					font-style: italic;
					color: #a7aaad;
				}
			}

			/* WP and HTML embed tabs */
			.pe-embed-share-tabs {
			  margin: 0 0 20px;
			  padding: 0;
			  list-style: none;

				.pe-embed-share-tab-button {
				  display: inline-block;

					+ .pe-embed-share-tab-button {
					  margin: 0 0 0 10px;
					  padding: 0 0 0 11px;
					  border-left: 1px solid #a7aaad;
					}

					[aria-selected="true"] {
					  color: #fff;
					}

					button {
					  margin: 0;
					  padding: 0;
					  border: none;
					  background: 0 0;
					  font-size: 16px;
					  line-height: 1.3;
					  color: #a7aaad;
					  cursor: pointer;
					  transition: color .1s ease-in;
					}
				}
			}
		}
	}
}

.pe-embed-share-dialog-close,
.pe-embed-share-dialog-open {
	margin: -8px 0 0;
	padding: 0;
	background: 0 0;
	border: none;
	cursor: pointer;
	outline: 0;

	.dashicons {
		padding: 4px;
	}
}

.pe-embed-share-dialog-open {

	.dashicons {
		top: 8px;
	}
}

.pe-embed {
	font-size: 15px;
	font-weight: 400;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	line-height: 1.5;
	background: #fff;
	color: #8c8f94;
	border: 1px solid #dddfe2;
	padding: 16px;
	margin: 0;

	.screen-reader-text {
	  border: 0;
	  clip: rect(1px,1px,1px,1px);
	  -webkit-clip-path: inset(50%);
	  clip-path: inset(50%);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	  word-wrap: normal !important;
	}

	/* Below/Sidebar content */
	.pe-info-content {
		background: #f0f2f5;
		border-bottom: 2px solid #ced0d4;
		margin-left: -16px;
		margin-right: -16px;
		margin-bottom: 15px;

		&.pe-below-content {
			padding: 12px;
		}
	}

	div h4 {
		margin: 0;

		> a {
			color: #0f1419;
			font-size: 1.2em;
			line-height: 1.4em;
		}
	}

	a {
		color: #8c8f94;
		text-decoration: none;
	}

	/* Title */
	.pe-title {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 5px;
		margin-bottom: 5px;

		a {

			&:hover,
			&:focus,
			&:active {
				text-decoration: underline;
			}
		}

		h4 {
			font-size: 0.8em;
		}

		.pe-date {
			font-size: 0.8em;

			p {
				margin: 0;

			}
		}

		/* Site icon */
		.pe-embed-site-title {

			.pe-embed-site-icon {
				width: auto;
				height: 40px;
				border-radius: 50%;
				border: 1px solid rgba(0, 0, 0, 0.1);
			}
		}
	}

	/* Excerpt */
	.pe-excerpt {
	 color: #1c1e21;
	}

	/* Excerpt & Image */
	.pe-excerpt-image {

		&.pe-excerpt--no-image .pe-excerpt {
			padding-bottom: 12px;
		}

		.pe-image {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: relative;

			img {
				display: none;
			}

			> a {
					position: absolute;
					width: 100%;
					height: 100%;
			}
		}

		.pe-excerpt {

			p {
				margin: 10px 0;
				&:first-of-type {
					margin-top: 0;
				}

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

		/* Rectangular image */
		&.pe-image-shape-rectangular {
			margin-left: -16px;
			margin-right: -16px;

			.pe-excerpt {
				padding: 0 12px 12px;
			}

			.pe-image {
				width: 100%;
				min-height: 270px;
			}
		}

		/* Square Image */
		&.pe-image-shape-square {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-column-gap: 20px;

			.pe-excerpt {
				padding: 12px 12px 12px 0;
				order: 2;
			}

			.pe-image {
				width: 160px;
				min-height: 160px;
				order: 1;
			}
		}

		.pe-excerpt {

		}

		.pe-image {

		}
	}

	/* Read more */
	.pe-readmore {
		border-bottom: 1px solid #ced0d4;
		margin-bottom: 13px;

		a {
			display: block;
			color: #fff;
			user-select: none;
			outline-style: none;
			background: #1b74e4;
			border-radius: 7px;
			transition: all 0.2s;
			text-align: center;
			padding: 7px 15px;
			font-weight: 400;
			font-size: 1.2em;

			&:hover,
			&:active,
			&:focus {
				background: #1b74e4;
				color: #f2f2f2;
			}
		}
	}

	/* Footer */
	.pe-footer {
		display: table;
		width: 100%;

		/* Site title/logo & Meta */
		.pe-embed-site-title,
		.pe-embed-meta {
			display: table-cell;
		}

		/* Site title/logo */
		.pe-embed-site-title {
			display: table-cell;
			font-weight: 600;
			line-height: 1.78571428;

			a {
				position: relative;
				display: inline-block;
				padding-left: 35px;

				img.pe-embed-site-icon {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					height: 25px;
					width: 25px;
					border: 0;
				}
			}
		}

		/* Meta */
		.pe-embed-meta {
			text-align: right;
			white-space: nowrap;
			vertical-align: middle;

			/* Comments and Share */
			.pe-embed-comments,
			.pe-embed-share {
				display: inline;
			}

			/* Comments */
			.pe-embed-comments {

				a {
					line-height: 1.78571428;
					display: inline-block;

					span {

					}
				}

				+ .pe-embed-share {
				  margin-left: 10px;
				}
			}

			/* Share */
			.pe-embed-share {

				button {

					span {

					}
				}
			}
		}
	}
}

/* Dashicons */
.dashicons {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
	transition: background .1s ease-in;
	position: relative;
	top: 5px;
}

.dashicons-no {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}

.dashicons-admin-comments {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
}

.pe-embed-comments a:hover .dashicons-admin-comments {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}

.dashicons-share {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
	display: none;
}

.js .dashicons-share {
	display: inline-block;
}

.pe-embed-share-dialog-open:hover .dashicons-share {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}