/* FILE: editor/_accessibility.scss */
// Do not style `.screen-reader-text` as of WP6.8 (@see Social Icon block)!

.wp-block.is-style-screen-reader-text,
.wp-block > .is-style-screen-reader-text {
	position: relative !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	padding: .5em !important;
	margin-block: 0 !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	font-size: .8em !important;
	line-height: 1 !important;
	background: none !important;
	color: inherit !important;
	border: 0 !important;
	border-inline-start: .25em solid !important;
	border-radius: .25em !important;
	box-shadow: none !important;

	&:not(:hover, :focus, :focus-within) {
		background: repeating-linear-gradient(
			-45deg,
			rgba( #000, .1 ),
			rgba( #000, .1 ) 5px,
			rgba( #fff, .1 ) 5px,
			rgba( #fff, .1 ) 10px
		) !important;
		opacity: .5;
		white-space: nowrap !important;

		* {
			white-space: inherit !important;
		}

		.is-layout-flex:not(.is-vertical) & {
			max-width: 3rem !important;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}

.wp-block:hover > .is-style-screen-reader-text,
.is-selected > .is-style-screen-reader-text {
	@extend %a11y_hover_focus;
}

.is-style-screen-reader-text {

	&:hover,
	&:focus,
	&:focus-within {
		@extend %a11y_hover_focus;
	}
}

%a11y_hover_focus {
	opacity: 1 !important;
}

// Inline formats in rich text editor.
// @see  Editor\Assets::scripts()
// @see  assets/js/block-editor.js
// @see  assets/js/editor/formats.js
.rich-text {

	span.screen-reader-text[class] {
		clip: auto;
		clip-path: none;
		position: static !important;
		width: unset;
		height: unset;
		font-size: .85rem;
		vertical-align: middle;
		line-height: inherit;
		outline: 2px dotted;

		&:not([data-rich-text-format-boundary]) {
			opacity: .66;
		}
	}

		&:not( .is-selected ) span.screen-reader-text {
			display: inline-block;
			max-width: 4ch !important;
			line-height: 1;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

	span.screen-reader-text,
	span.is-aria-hidden {
		padding-inline: .25em;
		background-color: color-mix( in srgb, currentColor 15%, transparent );
		border-radius: 2px;
	}
}
