/**
 * Why all the `!important`'s? https://github.com/mrwweb/useful-block-styles/pull/5
 */

/**
 * Screen Reader Text Heading
 */
.is-style-useful-screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
}

/**
 * Multicolumn List Block
 */
.is-style-useful-multicolumn {
	padding-left: 0 !important;
	column-width: 10em !important;
	column-gap: 1em !important;
}
.is-style-useful-multicolumn li {
	padding-left: 0 !important;
	margin-left: 0 !important;
	break-inside: avoid;
}

/**
 * No Markers List
 */
.is-style-useful-no-markers,
.is-style-useful-no-markers li {
	padding-left: 0 !important;
	list-style: none !important;
}

.is-style-useful-no-markers li {
	margin-left: 0 !important;
}

/**
 * Button Only File Block
 */
.is-style-useful-button-only a:not(.wp-block-file__button) {
	display: none !important;
}
.is-style-useful-button-only .wp-block-file__button {
	margin-left: 0 !important;
}

/**
 * Gallery Styles
 */
.is-style-useful-not-stretched .wp-block-image,
.is-style-useful-centered-not-stretched .wp-block-image,
.is-style-useful-small-logos .wp-block-image,
.is-style-useful-small-grayscale-logos .wp-block-image {
	flex-grow: 0 !important;
}

.is-style-useful-centered-not-stretched .wp-block-image {
	margin: auto !important;
}

.is-style-useful-small-logos .wp-block-image,
.is-style-useful-small-grayscale-logos .wp-block-image {
	max-width: 175px !important;
	margin: auto !important;
	padding: 1em !important;
}

.is-style-useful-small-grayscale-logos .wp-block-image img {
	filter: grayscale(100%) !important;
	transition: filter .25s !important;
}

.is-style-useful-small-grayscale-logos a:hover img,
.is-style-useful-small-grayscale-logos a:focus img {
	filter: grayscale(0) !important;
}