@mixin selected-preset() {
	&:after {
		content: "\f058";
		font: normal normal normal 14px/1 FontAwesome;
		width: 22px;
		position: absolute;
		top: -9px;
		right: -9px;
		color: #f95b26;
		background: white;
		border-radius: 50%;
		background-size: 22px 27px;
		height: 21px;
		text-align: center;
		font-size: 20px;
	}
}

@mixin panel-button( ) {
	background-color: white;
	text-decoration: none;
	padding: 7px 15px;
	border-radius: 30px;
	margin: 0 4px;
	transition: background-color .25s, color .25s;

	&:focus {
		box-shadow: none;
	}

	&:hover {
		background-color: lighten( $hover-color, 15% );
		color: white;
	}

	&.selected {
		background-color: $hover-color;
		color: white;
	}

	&:active{
		box-shadow: 0 0 49px -12px black inset;
	}
}

@mixin slider( ) {
	height: 3px;
	border-radius: 0;
	width: 75px;
	border-color: #cecece;
	margin: 16px;
	margin-top: 10px;
	display: inline-block;
	float: right;
	cursor: pointer;

	.ui-slider-handle {
		left: 0%;
		border: 3px;
		height: 1em;
		width: 1em;
		border-radius: 0;
		background: $hover-color;
		top: 50%;
		cursor: pointer;
		border-radius: 50%;
		transform: translateY(-50%);
	}
}