@import "../variables";

.font-controls {
	height:100%;
}
.controls-tabs {
	height:100%;
	width:280px;
	flex-direction:column;
	position:relative;
	z-index:4;

	&-headers {
		margin:0;
		padding:0;
		height:52px;
		list-style: none;
	}

	&-sliders {
		height: calc(100% - 52px);
	}

	&-icon {
		height:52px;
		float:left;
		width:93.3px;
		background-color: $black;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		cursor: pointer;
		position:relative;
		border-right: $dark-grey 1px solid;
		transition: background-color 300ms ease;

		&.is-active, &:hover {
			@include themify() {
				background-color: $theme-background;
			}
			z-index: 3;
			filter: contrast(100%);
			border: none;
			.controls-tabs-icon-legend {
				display: none;
			}
		}

		&-legend {
			color: $medium-grey;
			position: absolute;
			bottom: 3px;
			text-align: center;
			width: 100%;
			font-size: 10px;
			letter-spacing: 0.05em;
		}

		&.is-active:after {
			content: "";
			position: absolute;
			z-index: 3;
			bottom: 0;
			display: block;
			width: 0;
			height: 0;

			transform: translate(38px, 8px);
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			@include themify() {
				border-top:10px solid $theme-background;
			}
		}
	}
}

// TODO: ids are forbidden, get rid of 'em
#Func {
	background-image: url('../../images/func.svg');
}

#Style {
	background-image: url('../../images/style.svg');
}

#Serif {
	background-image: url('../../images/serif.svg');
}

#Settings {
	background-image: url('../../images/settings.svg');
	background-size:20px;
	background-position-y: 15px;
}
