/* ----- ----- ----- */
@import url('/.library/css/default.css');
@import url('/.library/css/keyframes.css');
@import url('/.library/css/components.css');
/* ----- ----- ----- */
player {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	/* ----- ----- ----- */
	& overlay {
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
	}
	/* ----- ----- ----- */
	& progressbar {
		position: absolute;
		bottom: -4px;
		left: 0;

		width: 100%;
		height: 8px;
		/* ----- ----- ----- */
		& timer {
			display: block;

			width: 0;
			height: 100%;
			border-radius: 8px;

			background: linear-gradient(to right, rgb(255, 0, 52) 80%, rgb(255, 40, 144) 100%);

			transition: width 0.4s linear;
		}
	}
	/* ----- ----- ----- */
	& button:nth-of-type(1) {
		position: absolute;
		top: 0;
		left: 0;

		width: 80px;
		height: 100%;
	}
	& button:nth-of-type(2) {
		position: absolute;
		top: 0;
		right: 0;

		width: 80px;
		height: 100%;
	}
	/* ----- ----- ----- */
	& play {
		position: fixed;
		top: 0;
		left: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;

		background: rgba(0, 0, 0, 0.8);
	}
}
/* ----- ----- ----- */
main {
	position: relative;

	margin: 20px;

	width: calc(100% - 40px);
	height: calc(100% - 40px);
	/* ----- ----- ----- */
	& section#topbar {
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
	}
	/* ----- ----- ----- */
	& section#rightbar {
		position: absolute;
		bottom: 0;
		right: 0;

		width: 24px;
		/* ----- ----- ----- */
		& div#whatsapp svg {
			border-radius: 50%;
			overflow: visible;
		}
		& div#like svg.liked {
			overflow: visible;
			border-radius: 50%;
			fill: var(--red);
			animation: pulse-red 0.5s linear;
		}
	}
}
/* ----- ----- ----- */