/**
 * @package   CleverStyle Music
 * @category  Web Components
 * @author    Nazar Mokrynskyi <nazar@mokrynskyi.com>
 * @copyright Copyright (c) 2014-2015, Nazar Mokrynskyi
 * @license   MIT License, see license.txt
 */

:host {
	align-items         : center;
	-webkit-align-items : center;
	cursor              : pointer;
	display             : flex;
	display             : -webkit-flex;
	height              : 1rem;
	left                : 0;
	margin              : 0 auto;
	position            : absolute;
	right               : 0;
	top                 : calc(100vh - 4.5rem);
	width               : calc(75% + 4rem);

	&[blinking] .time:first-of-type {
		animation         : blinking ease-out 1s infinite;
		-webkit-animation : blinking ease-out 1s infinite;
	}
}

@keyframes blinking {
	0% {
		opacity : 1;
	}
	50% {
		opacity : 0;
	}
	100% {
		opacity : 1;
	}
}

@-webkit-keyframes blinking {
	0% {
		opacity : 1;
	}
	50% {
		opacity : 0;
	}
	100% {
		opacity : 1;
	}
}

.time {
	cursor      : default;
	display     : inline-block;
	text-align  : center;
	text-shadow : 0 0 .1rem #000;
	width       : 4rem;
}

.progress-container {
	display      : inline-block;
	flex         : 1;
	-webkit-flex : 1;
	height       : 1rem;
	overflow     : hidden;
	width        : calc(100% - 11.5rem);

	&:before {
		background    : rgba(36, 36, 36, .7);
		box-shadow    : 0 0 .1rem #242424;
		content       : '';
		display       : block;
		height        : .1rem;
		left          : .25rem;
		margin-bottom : -.1rem;
		position      : relative;
		top           : .5rem;
		width         : 100%;
	}

	.progress {
		background : rgba(255, 255, 255, .7);
		height     : .1rem;
		left       : .25rem;
		position   : relative;
		top        : .5rem;

		&:after {
			background    : #fff;
			border-radius : 50%;
			box-shadow    : .1rem 0 .1rem #242424;
			content       : '';
			display       : block;
			height        : .5rem;
			position      : absolute;
			right         : -.25rem;
			top           : -.25rem;
			width         : .5rem;
		}
	}
}
