@use "@wordpress/base-styles/colors" as *;

.wp-block-post-featured-image {
	margin-left: 0;
	margin-right: 0;
	a {
		display: block;
		height: 100%;
	}
	:where(img) {
		max-width: 100%;
		width: 100%;
		height: auto;
		vertical-align: bottom;
		box-sizing: border-box;
	}

	&.alignwide img,
	&.alignfull img {
		width: 100%;
	}

	.wp-block-post-featured-image__overlay {
		&.has-background-dim {
			position: absolute;
			inset: 0;
			background-color: $black;

			@at-root .wp-block-post-featured-image {
				position: relative;
			}
		}

		&.has-background-gradient {
			background-color: transparent;
		}

		@for $i from 0 through 10 {
			&.has-background-dim-#{ $i * 10 } {
				opacity: $i * 0.1;
			}
		}
	}

	&:where(.alignleft, .alignright) {
		width: 100%;
	}
}