/* ====================

Table of Contents

1. Presets
2. Presets highlighter

==================== */



/* 1. Presets */

.presets {
	display: flex;
	position: relative;
	width: 100%;
}

.presets > div {
	flex-grow: 1;
	box-sizing: border-box;
	padding: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: #adb0b5;
	text-transform: capitalize;
	transition: color .2s ease-in-out;
	cursor: pointer;
}

.presets > div.active,
.presets > div:hover {
	color: #e4e6eb;
}

.presets > div.active {
	pointer-events: none;
}



/* 2. Presets highlighter */

.presets-highlighter {
	display: flex;
	width: 100%;
	margin: 0 auto 13px;
	height: 2px;
	min-height: 2px;
	border-radius: 2px;
	background-image: linear-gradient(40deg, #ffa745 0%, #fe869f 30%, #ef7ac8 45%, #a083ed 70%, #43aeff 85%);
	overflow: hidden;
}

.presets-highlighter > span {
	display: block;
	height: 2px;
	min-height: 2px;
	min-width: 0px;
	background-color: #3a3b3c;
	transition: min-width .25s ease-in-out;
}

.presets-highlighter > span.center {
	background-color: transparent;
}

.presets-highlighter > span.right {
	flex-grow: 1;
}