@import '../../assets/css/_variables.styl'

.unc-audio-typing
	font-size 1.2em
	text-align center
	
	.unc-typing-rows
		border thin solid #aaa
		height 6.5em
		overflow hidden
		position relative
		min-width 609px
		
		.unc-typing-wrapper
			position relative
			transition .2s top ease
			width 100%			

		.unc-typing-row
			align-items center
			display flex
			flex-wrap wrap
			height 6.5em
			justify-content center

			.unc-word
				margin 0 .5em
				position relative
				white-space nowrap
				
				&.correct,
				&.wrong
					&:before
						background-color green
						border-radius 50%
						content ''
						height 8px
						left calc(50% - 4px)
						position absolute
						top 70%
						width 8px
				&.wrong:before
					background-color red

				> span
					align-items center
					display inline-flex
					height 60px
					opacity .3
					text-align center
					transition .3s opacity linear
					vertical-align middle
					
					&.focused
						animation focused .5s infinite
					
					span.unc-white-space
						display inline-block
						width .5em
					
					span.unc-hidden-letter
						background-color blue
						border-radius 50%
						display inline-block
						height 8px
						margin 0 .1em
						width 8px
							
					&.actived
						opacity 1
						

@keyframes focused {
	0% { background-color: transparent; }
	100% { background-color: #ccc; }
}