/* WPForms
--------------------------------------------- */

div.wpforms-container {

	.wpforms-title {
	    @include font-sizes( 24px, 32px );
		font-weight: 700;
		line-height: 1.2;
		margin: 0 0 16px;
		padding: 0;
	}

	.wpforms-description {
		margin: 0 0 16px;
		padding: 0;
	}

	.wpforms-field {
		padding: 0;
		margin-bottom: 32px;
	}

	.wpforms-field-label {
		font-size: 16px;
	}

	.wpforms-recaptcha-container {
		padding: 0;

		@include media(">=tablet") {
			margin-bottom: -78px;
		}
	}

	.wpforms-submit-container {
		padding: 0;
		margin-top: 32px;
		text-align: right;
	}

	&.one-line {
		@include clearfix;

			@include media(">=tablet") {

			.wpforms-field-container {
				display: table;
				width: calc(100% - 110px);
				float: left;

				.wpforms-field {
					display: table-cell;
					padding-right: 16px;
					margin: 0;
				}
			}

			.wpforms-submit-container {
				float: right;
				width: 110px;
				clear: none;
				margin: 0;
			}
		}
	}
}

/* Shared Counts
--------------------------------------------- */

.shared-counts-wrap {

	&.style-icon {

		svg {
			fill: $grey_5;
			@include icon-position( 24px );
		}

		.shared-counts-button {
			line-height: 0;
			padding: 10px;

			&:hover svg {
				fill: $highlight;
			}

			&:not(.included_total) {
				.shared-counts-label,
				.shared-counts-count {
					display: none;
				}
			}
		}
	}

	&.style-button {

		@supports( display: $grid ) {
			display: grid;
			grid-template-columns: repeat( 2, 1fr );
			grid-column-gap: 16px;

			@include media(">=tablet") {
				grid-template-columns: repeat( 4, 1fr );
			}
		}

		h3 {
			color: $grey_8;
			text-transform: uppercase;
			font-weight: 600;
			text-align: center;
			grid-column: 1 / -1;
		}

		.shared-counts-button {
			background: $grey_6;
			border-radius: 3px;
			color: $white;
			display: block;
			font-size: 16px;
			font-weight: 600;
			padding: 18px;
			text-align: center;
			text-decoration: none;
			margin-bottom: 15px;

			&:hover {
				background: $grey_8;
			}

			svg {
				fill: $white;
				@include icon-position( 24px );
				vertical-align: middle;
				margin-right: 10px;
			}

			&.facebook {
				background: $facebook;

				&:hover {
					background: darken( $facebook, 10% );
				}
			}

			&.pinterest {
				background: $pinterest;

				&:hover {
					background: darken( $pinterest, 10% );
				}
			}

			&.twitter {
				background: $twitter;

				&:hover {
					background: darken( $twitter, 10% );
				}
			}
		}

		.shared-counts-count {
			display: none;
		}		
	}
}
