.player-buttons
	.back-button, .forward-button, .play-pause
		display	inline-block
		&::after
			font-family	'FontAwesome'
	.back-button
		&::after
			content	"\f048"
	.forward-button
		&::after
			content	"\f051"
	.play-pause
		&::after
			content	"\f017"
		&.play
			&::after
			content	"\f04b"
		&.pause
			&::after
				content	"\f04c"
.back-button, .forward-button, .play-pause
	color = $player-controls-main-text-color
	background	linear-gradient($player-controls-background-color, $player-controls-background-color - #222)
	&:hover
		background	linear-gradient($player-controls-hover-background-color, $player-controls-hover-background-color - #222)
		&::after
			border-top	1px solid $player-controls-hover-background-color + #322
	&::before
		border	2px solid black
		content	''
		position	absolute
		top	-2px
		left	-1px
		bottom	-1px
		right	-1px
		box-shadow	0px 1px 2px rgba(150,150,150,.5)
	&::after
		border-top	1px solid $player-controls-background-color + #322
		position	absolute
		top	0px
		left	0px
		bottom	0px
		right	0px
	&.disabled
		cursor	default
		background	linear-gradient($player-controls-disabled-background-color, $player-controls-disabled-background-color - #222)
		&:hover
			background	linear-gradient($player-controls-disabled-background-color, $player-controls-disabled-background-color - #222)
		&:hover::after, &::after
			border-top	1px solid $player-controls-disabled-background-color + #322
.back-button, .forward-button
	position	absolute
	top	( $play-button-size - $back-forward-button-height ) / 2
	height	$back-forward-button-height
	width	$back-forward-button-width
	&::after
		font-size	16px
		line-height	$back-forward-button-height
		padding	$play-button-size / 3
.back-button
	right	50%
	border-radius	$back-forward-button-height / 2, 0, $back-forward-button-height / 2, 0
	&::before, &::after
		border-radius	$back-forward-button-height / 2, 0, $back-forward-button-height / 2, 0
	&::after
		text-align	left
		padding-right	0
		padding-top	0
		padding-bottom	0
.forward-button
	left	50%
	border-radius	0, $back-forward-button-height / 2, 0, $back-forward-button-height / 2
	&::before, &::after
		border-radius	0, $back-forward-button-height / 2, 0, $back-forward-button-height / 2
	&::after
		text-align	right
		padding-left	0
		padding-top	0
		padding-bottom	0
.play-pause
	position	relative
	height	$play-button-size
	width	$play-button-size
	z-index	1
	border-radius	$play-button-size / 2
	&::before, &::after
		border-radius	$play-button-size / 2
	&::after
		font-size	24px
		line-height	$play-button-size
	&.play::after
		padding-left	$play-button-size / 10