/* голосовая запись: templates/utils/voice_recorder.twig, js/utils/audio.js */
.voice_recorder {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 10px;
}
.voice_recorder [hidden] {
	display: none !important;
}
.voice_recorder__start {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	color: inherit;
	cursor: pointer;
}
.voice_recorder__start svg {
	fill: #575757;
	width: 16px;
	height: 16px;
	margin-right: 5px;
}
.voice_recorder__recording {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
}
.voice_recorder__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #e53935;
	animation: voice_recorder_blink 1s infinite;
}
@keyframes voice_recorder_blink {
	50% { opacity: .2; }
}
.voice_recorder__timer {
	font-variant-numeric: tabular-nums;
	font-weight: bold;
}
.voice_recorder__of {
	color: #72727c;
}
.voice_recorder__result {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
}
.voice_recorder__result audio {
	max-width: calc(100vw - 80px);
	height: 40px;
}
.voice_recorder__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #ababab;
	cursor: pointer;
}
.voice_recorder__remove svg {
	fill: #fff;
	width: 10px;
	height: 10px;
}
.voice_recorder__status {
	font-size: 13px;
	color: #72727c;
}
.voice_recorder__status_error {
	color: #ff0000;
}

/* плеер аудио во вложениях: templates/utils/audio_player.twig */
.audio_player {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 5px 0 10px;
	max-width: 100%;
}
.audio_player audio {
	max-width: 100%;
	height: 40px;
}
.audio_player__duration {
	font-size: 13px;
	color: #72727c;
}

/* заглушка для гостей на странице вопроса с голосовой записью */
.question__voice_login {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 5px 0 10px;
	font-size: 14px;
	color: #72727c;
}
.question__voice_login svg {
	fill: #72727c;
	width: 16px;
	height: 16px;
}