/**
 * Styles for Hero hero Block.
 *
 * CSS for both Editor + Frontend.
 */

.dgb-hero {
	text-align: center;
	position: relative;
	padding: 5rem 2rem;

	&.has-image {
		padding: 0;

		.dgb-hero-section {
			padding: 5rem 2rem;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			align-items: center;
			flex-flow: column;
		}
	}

	.dgb-hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		&.overlay-opacity {
			&.overlay-opacity-1 {
				opacity: .1;
			}

			&.overlay-opacity-2 {
				opacity: .2;
			}

			&.overlay-opacity-3 {
				opacity: .3;
			}

			&.overlay-opacity-4 {
				opacity: .4;
			}

			&.overlay-opacity-5 {
				opacity: .5;
			}

			&.overlay-opacity-6 {
				opacity: .6;
			}

			&.overlay-opacity-7 {
				opacity: .7;
			}

			&.overlay-opacity-8 {
				opacity: .8;
			}

			&.overlay-opacity-9 {
				opacity: .9;
			}

			&.overlay-opacity-10 {
				opacity: 1;
			}
		}
	}

	.hero-image {
		height: 500px;
		width: 600px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.wp-block-button {
		margin-bottom: 1.5em;

		&.dgb-button-center {
			left: 0;
			transform: translateX(0);
		}

		&.dgb-button-right {
			transform: translateX(-50%);
			left: 50%;
		}

		&.dgb-button-left {
			transform: translateX(50%);
			left: -50%;
		}
	}

	.dgb-hero-title {
		margin: 0 0 1rem;
		font-weight: normal;
		position: relative;
	}

	.dgb-hero-description {
		margin-bottom: 2rem;
		padding-bottom: 0;
		position: relative;
	}

	.wp-dgb-button {
		position: relative;
	}

	button {
		&.components-button {
			position: relative;
			margin-bottom: 1rem;
		}
	}
}

/**
* Frontend Styles.
*/
.wp-block-dgb-hero {
	&.has-no-content {
		display: none
	}
}