/*-------------------------------------------------------*/
/* Gutenberg Front-end Styles
/*-------------------------------------------------------*/

// Background color
:root .has-blue-background-color {
	background-color: $editor-color-1;
}
:root .has-orange-background-color {
	background-color: $editor-color-2;
}
:root .has-dark-background-color {
	background-color: $editor-color-3;
}
:root .has-silver-background-color {
	background-color: $editor-color-4;
}

// Text color
:root .has-blue-color {
	color: $editor-color-1;
}
:root .has-orange-color {
	color: $editor-color-2;
}
:root .has-dark-color {
	color: $editor-color-3;
}
:root .has-sinver-color {
	color: $editor-color-4;
}

/* Buttons
-------------------------------------------------------*/
.wp-block-button .wp-block-button__link {
	@include editor-button;
}

.wp-block-button__link:not(.has-background),
.wp-block-button__link:not(.has-background):active,
.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):visited {
	background-color: $primary-color;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
}

/* Full-width Images
-------------------------------------------------------*/
.amela-fullwidth .entry__article {
	.alignwide {
		width: auto;
		max-width: none;
		position: relative;
		z-index: 1;

		@include bp-lg-up {
			margin-left: -140px;
			margin-right: -140px;
		}

		@include bp-xl-up {
			margin-left: -220px;
			margin-right: -220px;
		}
	}

	.alignfull {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: 100vw;
		position: relative;
		z-index: 1;

		img {
			width: 100vw;
		}
	}
}

.page.amela-fullwidth .entry__article {
	.alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Images
-------------------------------------------------------*/
.wp-block-image {
	.alignleft {
		margin-right: 2em;
		max-width: 40%;

		@include bp-sm-down {
			float: none;
			margin-right: 0;
		}
	}

	.alignright {
		margin-left: 2em;
		max-width: 40%;

		@include bp-sm-down {
			float: none;
			margin-left: 0;
		}
	}
}

/* Cover
-------------------------------------------------------*/
.wp-block-cover {
	margin: 0 0 1.5em;
	font-size: 1rem;
	line-height: 1.3;
	color: #fff;

	&.alignleft {
		margin: 0.5em 2em 1.5em 0;
	}

	&.alignright {
		margin: 0.5em 0 1.5em 2em;
	}
}

.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
section.wp-block-cover-image > h2 {
	font-size: 2.25em;
}

/* Tables
-------------------------------------------------------*/
.wp-block-table {
	width: 100%;
	margin-bottom: 2rem;
}

.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color
	tr:nth-child(odd),
.wp-block-table.is-style-stripes tr:nth-child(odd) {
	background-color: #f9f9f9;
}

/* Latest Comments
-------------------------------------------------------*/
ol.wp-block-latest-comments {
	padding-left: 0;
}

/* Galleries
-------------------------------------------------------*/
ul.wp-block-gallery,
.wp-block-gallery ul {
	list-style: none;
	padding-left: 0;
}

/* Captions
-------------------------------------------------------*/
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-audio figcaption {
	color: $meta-color;
}

.wp-block-image figcaption {
	margin-top: 1em;
}

/* Separators
-------------------------------------------------------*/
hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	opacity: 1;
	border-top: 1px solid $border-color;
}

.wp-block-separator {
	border-color: $border-color;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots),
.wp-block-separator.is-style-default {
	max-width: 100px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-separator.is-style-dots:before {
	font-weight: 500;
	color: $text-color;
}

/* Blockquote / Pullquote
-------------------------------------------------------*/
blockquote {
	overflow: hidden;
}

.wp-block-quote {
	&.has-text-align-center {
		border: 0;
	}

	&.has-text-align-right {
		border-left: 0;
		border-right-width: 3px;
		border-right-style: solid;
	}

	&.is-large,
	&.is-style-large {
		padding: 12px 40px;
		margin-top: 40px;
		margin-bottom: 40px;

		p {
			font-size: $blockquote-text-font-size--large;
		}

		cite,
		footer {
			font-size: $blockquote-citation-font-size--large;
		}
	}
}

.wp-block-pullquote {
	text-align: left;
	position: relative;
	line-height: 1.5;
	padding: 0.1em 1em 0.2em 2.5em;
	margin-bottom: 30px;
	margin-top: 0;
	color: $heading-color;

	&.alignleft,
	&.alignright {
		font-size: $pullquote-text-font-size;
	}

	blockquote {
		margin: 0;
		border: 0;
		padding: 0;
		line-height: normal;
	}

	&::before {
		content: "“";
		color: $primary-color;
		left: 0;
		top: 0;
		position: absolute;
		font-size: 5rem;
		line-height: 1;
	}

	p {
		color: inherit;
	}

	cite {
		opacity: 0.7;
	}

	blockquote:not(.has-text-color) cite {
		color: $text-color;
	}

	@include bp-sm-up {
		&.alignleft {
			margin-right: 2em /*!rtl:end:ignore*/;
		}

		&.alignright {
			margin-left: 2em /*!rtl:end:ignore*/;
		}
	}
}

// Solid Color
.wp-block-pullquote.is-style-solid-color {
	margin-top: 10px;
	padding: 40px 0;

	&::before {
		left: 10px;
		top: 10px;
	}

	&.alignleft blockquote p,
	&.alignright blockquote p {
		font-size: $pullquote-text-font-size--small;
	}
}

/* Social Icons
-------------------------------------------------------*/
ul.wp-block-social-links {
	padding: 0;

	.wp-social-link a:focus {
		color: currentColor;
		fill: currentColor;
	}
}

/* Latest Posts
-------------------------------------------------------*/
.wp-block-latest-posts {
	&.wp-block-latest-posts__list {
		padding: 0;
	}

	&__featured-image {
		margin-bottom: 10px;
	}

	a {
		display: inline-block;
		line-height: 1.3;
	}
}