.qodef-m-website-song {
	display: block;
	position: fixed;
	width: 55px;
	height: 55px;
	left: 40px;
	top: auto;
	bottom: 40px;
	margin: 0;
	z-index: 10000;
	cursor: pointer;
	
	opacity: 0;
	animation: qodef-fade-in 1s ease-out 1.5s forwards;
	
	@include qodefScreenSize680 {
		display: none;
	}
	
	&.qodef-light {
		.qodef-website-song {
			background: #fff;
			
			.qodef-track-listen,
			.qodef-track-pause {
				color: #fff;
			}
			
			.qodef-song-play-icon {
				.qodef-m-website-song.qodef-light & {
					-webkit-text-stroke: 1px $text-color;
				}
			}
			
			&:after {
				background-color: rgba(255, 255, 255, 0.5);
			}
			
		}
	}
}

.qodef-website-song {
	position: relative;
	display: block;
	height: 100%;
	background: $text-color;
	border-radius: 50%;
	transition: .35s ease-out;
	
	.qodef-track-listen,
	.qodef-track-pause {
		position: absolute;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
		@include qodefHeadingStyle('h6', false, false);
		color: $text-color;
		transition: all .5s ease-out, color .35s ease-out;
		z-index: -2;
		
		.qodef-m-website-song.qodef-light &{
			/*color: #fff;*/
		}
	}
	
	.qodef-track-listen {
		left: calc(100% + 10px);
		opacity: 1;
	}
	
	.qodef-track-pause {
		opacity: 0;
		left:0;
	}
	
	.qodef-song-play-icon {
		font-size: 25px;
		@include qodefAbsoluteLayout();
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: transparent;
		-webkit-text-stroke: 1px #fff;
		transition: all .35s ease-out;
		
		.qodef-m-website-song.qodef-light &{
			-webkit-text-stroke: 1px $text-color;
		}
		
		&:after {
			content: '';
			@include qodefAbsoluteLayout();
			background-color: $text-color;
			opacity: .5;
			z-index: -1;
			border-radius: 50%;
			transition: .35s ease-out;
		}
	}
	
	&.qodef-track-in-progress {
		.qodef-song-play-icon {
			&:after {
				animation: qodefScalePlayerIcon 3.5s infinite both;
			}
		}
		
		.qodef-track-listen {
			opacity: 0;
			left:0;
		}
		
		.qodef-track-pause {
			opacity: 1;
			left: calc(100% + 10px);
		}
	}
	
	@keyframes qodefScalePlayerIcon {
		0% {
			transform: scale(1);
		}
		60% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	}
	
	@include keyframes(qodef-fade-in) {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}