@import (less) './client/icons/customIcons.less';
@import (less) '././././themes/fonts/5e/fonts.less';

.snippetBar {
	@menuHeight      : 25px;
	position         : relative;
	height           : @menuHeight;
	color            : black;
	background-color : #DDDDDD;

	.editors {
		position        : absolute;
		top             : 0px;
		right           : 0px;
		display         : flex;
		justify-content : space-between;
		height          : @menuHeight;
		& > div {
			width       : @menuHeight;
			height      : @menuHeight;
			line-height : @menuHeight;
			text-align  : center;
			cursor      : pointer;
			&:hover,&.selected { background-color : #999999; }
			&.text {
				.tooltipLeft('Brew Editor');
			}
			&.style {
				.tooltipLeft('Style Editor');
			}
			&.meta {
				.tooltipLeft('Properties');
			}
			&.undo {
				.tooltipLeft('Undo');
				font-size : 0.75em;
				color     : grey;
				&.active { color : inherit; }
			}
			&.redo {
				.tooltipLeft('Redo');
				font-size : 0.75em;
				color     : grey;
				&.active { color : inherit; }
			}
			&.foldAll {
				.tooltipLeft('Fold All');
				font-size : 0.75em;
				color     : inherit;
			}
			&.unfoldAll {
				.tooltipLeft('Unfold All');
				font-size : 0.75em;
				color     : inherit;
			}
			&.editorTheme {
				.tooltipLeft('Editor Themes');
				font-size : 0.75em;
				color     : black;
				&.active {
					position         : relative;
					background-color : #999999;
				}
			}
			&.divider {
				width      : 5px;
				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
				&:hover { background-color : inherit; }
			}
		}
		.themeSelector {
			position         : absolute;
			top              : 25px;
			right            : 0;
			z-index          : 10;
			display          : flex;
			align-items      : center;
			justify-content  : center;
			width            : 170px;
			height           : inherit;
			background-color : inherit;
		}
	}
	.snippetBarButton {
		display        : inline-block;
		height         : @menuHeight;
		padding        : 0px 5px;
		font-size      : 0.625em;
		font-weight    : 800;
		line-height    : @menuHeight;
		text-transform : uppercase;
		cursor         : pointer;
		&:hover, &.selected { background-color : #999999; }
		i {
			margin-right   : 3px;
			font-size      : 1.4em;
			vertical-align : middle;
		}
	}
	.toggleMeta {
		position    : absolute;
		top         : 0px;
		right       : 0px;
		border-left : 1px solid black;
		.tooltipLeft('Edit Brew Properties');
	}
	.snippetGroup {
		border-right   : 1px solid currentColor;
		&:hover {
			& > .dropdown { visibility : visible; }
		}
		.dropdown {
			position         : absolute;
			top              : 100%;
			z-index          : 1000;
			padding          : 0px;
			margin-left      : -5px;
			visibility       : hidden;
			background-color : #DDDDDD;
			.snippet {
				position    : relative;
				display     : flex;
				align-items : center;
				min-width   : max-content;
				padding     : 5px;
				font-size   : 10px;
				cursor      : pointer;
				.animate(background-color);
				i {
					height       : 1.2em;
					margin-right : 8px;
					font-size    : 1.2em;
					min-width: 25px;
					text-align: center;
					& ~ i {
						margin-right : 0;
						margin-left  : 5px;
					}
					/* Fonts */
					&.font {
						height : auto;
						&::before {
							font-size : 1em;
							content   : 'ABC';
						}

						&.OpenSans {font-family : 'OpenSans';}
						&.CodeBold {font-family : 'CodeBold';}
						&.CodeLight {font-family : 'CodeLight';}
						&.ScalySansRemake {font-family : 'ScalySansRemake';}
						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
						&.MrEavesRemake {font-family : 'MrEavesRemake';}
						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
						&.WalterTurncoat {font-family : 'WalterTurncoat';}
						&.Lato {font-family : 'Lato';}
						&.Courier {font-family : 'Courier';}
						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
						&.Overpass {font-family : 'Overpass';}
						&.Davek {font-family : 'Davek';}
						&.Iokharic {font-family : 'Iokharic';}
						&.Rellanic {font-family : 'Rellanic';}
						&.TimesNewRoman {font-family : 'Times New Roman';}
					}
				}
				.name { margin-right : auto; }
				.beta {
					align-self    : center;
					padding       : 4px 6px;
					margin-left   : 5px;
					font-family   : monospace;
					line-height   : 1em;
					color         : white;
					background    : grey;
					border-radius : 12px;
				}
				&:hover {
					background-color : #999999;
					& > .dropdown {
						visibility : visible;
						&.side {
							top         : 0%;
							left        : 100%;
							margin-left : 0;
							box-shadow  : -1px 1px 2px 0px #999999;
						}
					}
				}
			}
		}
	}
}