.spoken-word {
	margin-top: 1em;
	margin-bottom: 1em;
}

.spoken-word--active {
	position: sticky;
	top: 0.5em;
}

@media screen and ( min-width: 782px ) {
	body.admin-bar .spoken-word--active {
		top: calc( 0.5em + 32px );
	}
}

@media screen and ( min-width: 600px ) and ( max-width: 781px ) {
	body.admin-bar .spoken-word--active {
		top: calc( 0.5em + 46px );
	}
}

.spoken-word-playback-controls {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 30px));
	grid-auto-rows: 30px;
	gap: 6px;
	width: max-content;
}
.spoken-word-playback-controls__legend {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
}

.spoken-word-playback-controls__button {
	cursor: pointer;
	background: #beab93 !important;
	border: 0;
	border-radius: 0;
	color: #000 !important;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	line-height: 1;
	padding: 0;
}
.spoken-word *::selection,
.spoken-word *::-moz-selection,
.spoken-word *::-webkit-selection,
.text-to-speech *::selection,
.text-to-speech *::-moz-selection,
.text-to-speech *::-webkit-selection,
::selection,
::-moz-selection,
::-webkit-selection {
	background: #beab93;
	color: inherit;
}
.spoken-word-playback-controls__button--emoji {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
}
.spoken-word-playback-controls__dialog {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 300px;
	max-height: 100%;
	overflow: auto;
}
.spoken-word-playback-controls__label {
	display: block;
}
.spoken-word-playback-controls__input {
	display: block;
	width: 100%;
}
.spoken-word-playback-controls__heading {
	font-size: 1.2em;
	font-weight: bold;
}