/**
 * voice-type/assets/css/voice-type.css
 *
 * Mic button states: idle / listening (pulse) / processing (spinner ring).
 */

.voice-type-wrap {
	position: relative;
	display: inline-block;
}

.voice-type-wrap--block {
	display: block;
}

.voice-type-btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #fff;
	color: #555;
	cursor: pointer;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	z-index: 2;
}

/* Textareas grow tall — pin the button to the top corner instead of center. */
.voice-type-wrap--textarea .voice-type-btn {
	top: 10px;
	transform: none;
}

.voice-type-btn:hover,
.voice-type-btn:focus {
	color: #1a1a1a;
	border-color: rgba(0, 0, 0, 0.35);
	outline: none;
}

.voice-type-btn svg {
	display: block;
	pointer-events: none;
}

/* Listening: red mic with a soft expanding pulse. */
.voice-type-btn.is-listening {
	color: #fff;
	background: #d63638;
	border-color: #d63638;
	animation: voice-type-pulse 1.4s ease-out infinite;
}

@keyframes voice-type-pulse {
	0% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.45); }
	70% { box-shadow: 0 0 0 10px rgba(214, 54, 56, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0); }
}

/* Processing: spinning ring around a muted mic. */
.voice-type-btn.is-processing {
	color: #999;
	pointer-events: none;
}

.voice-type-btn.is-processing::after {
	content: "";
	position: absolute;
	inset: -3px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: voice-type-spin 0.8s linear infinite;
}

@keyframes voice-type-spin {
	to { transform: rotate(360deg); }
}

.voice-type-btn.is-error {
	color: #fff;
	background: #b32d2e;
	border-color: #b32d2e;
}