/* Button
--------------------------------------------- */

$default: nth( nth( $brand_colors, 1 ), 1 ); // first color in $brand_colors array

.wp-block-button__link {
	border: 2px solid brand-color( $default, 'darken' );
	border-radius: 3px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	padding: 16px 32px;
	text-decoration: none;

	.is-style-full &,
	&.full {
		display: block;
		width: 100%;
	}

	&:not(.has-text-color) {
		color: white;

		&:hover {
			color: white;
		}
	}

	&:not(.has-background) {
		background-color: brand-color( $default );

		&:hover,
		&:focus {
			background-color: brand-color( $default, 'darken' );
		}
	}

	@each $name, $color in $brand_colors {

		&.has-#{$name}-color:hover,
		&.has-#{$name}-color:focus {
			color: $color;
		}

		&.has-#{$name}-background-color:hover,
		&.has-#{$name}-background-color:focus {
			background-color: brand-color( $name, 'darken' );
		}
	}

}

/* Blockquote
--------------------------------------------- */

blockquote,
blockquote.wp-block-quote {
	background: transparent url(../icons/utility/quote.svg) no-repeat top left;
	background-size: 36px auto;
	padding-top: 36px + 11px;
	text-align: left;

	p {
		color: $base-color;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
	}

	cite,
	.wp-block-quote__citation {
		color: $base-color;
		display: block;
		font-size: 16px;
		font-weight: 700;
		margin-top: 12px;
		opacity: .5;
		text-transform: uppercase;
	}

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

}

/* Separator
--------------------------------------------- */

.wp-block-separator,
hr {
	background: transparent;
	border: none;
	width: 100%;
	height: 32px;
	position: relative;

	&::before {
		background: $border-color;
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		position: absolute;
		top: 50%;
		margin-top: -.5px;
	}
}

/* Image
--------------------------------------------- */

img {
	display: block;
	max-width: 100%;
	height: auto;

	&.alignleft {
		float: left;
		margin: 0 $block-margin $block-margin 0;
	}

	&.alignright {
		float: right;
		margin: 0 0 $block-margin $block-margin;
	}

	&.aligncenter {
		margin-left: auto;
		margin-right: auto;
	}

}

.wp-block-image figcaption {
	color: $grey_7;
	text-align: left;
	font-size: 14px;
	font-style: normal;
}

/* Tables
--------------------------------------------- */

.wp-block-table  {

    border-collapse: collapse;
    width: 100%;

	td, th {
		padding: .5em;
	    border: 1px solid;
	}
}

/* Color Options
--------------------------------------------- */

@each $name, $color in $brand_colors {

	.has-#{$name}-color {
		color: $color;
	}

	.has-#{$name}-background-color {
		background-color: $color;
	}
}

/* Group
--------------------------------------------- */

.wp-block-group {
	padding: 40px 16px;

	@include media(">=tablet") {
		padding: 60px 16px;
	}

	@include media(">=medium") {
		padding: 70px 16px;
	}

	.wp-block-group__inner-container {
		max-width: $content_width;
		margin: 0 auto;
		@include clearfix;

		& > *:last-child {
			margin-bottom: 0;
		}
	}

	// Dark background
	&.has-background:not(.has-grey-background-color) {
		color: $white;

		h1, h2, h3, h4, h5, h6, p {
			color: $white;
		}
	}
}
