homebrewery/client/homebrew/editor/snippetbar/snippetbar.less

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

.snippetBar {
	@menuHeight      : 25px;
	position         : relative;
	display          : flex;
	flex-wrap        : wrap-reverse;
	justify-content  : space-between;
	height           : auto;
	color            : black;
	background-color : #DDDDDD;
	font-size        : .65rem;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	font-weight: 800;

	.snippets {
		display         : flex;
		justify-content : flex-start;
		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
	}

	.editors {
		display         : flex;
		justify-content : flex-end;
		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
		font-size: .85rem;
		&:only-child {min-width   : unset; margin-left : auto;}

		>div {
			display         : flex;
			flex            : 1;
			justify-content : space-around;

			&:first-child { border-left : none; }

			& > div {
				position    : relative;
				width       : @menuHeight;
				height      : @menuHeight;
				line-height : @menuHeight;
				text-align  : center;
				cursor      : pointer;

				&.editorTool:not(.active) { cursor : not-allowed; }

				&:hover,&.selected { background-color : #999999; }
				&.text {
					.tooltipLeft('Brew Editor');
				}
				&.style {
					.tooltipLeft('Style Editor');
				}
				&.meta {
					.tooltipLeft('Properties');
				}
				&.snippet {
					.tooltipLeft('Snippets');
				}
				&.undo {
					.tooltipLeft('Undo');
					color     : grey;
					&.active { color : inherit; }
				}
				&.redo {
					.tooltipLeft('Redo');
					color     : grey;
					&.active { color : inherit; }
				}
				&.foldAll {
					.tooltipLeft('Fold All');
					color     : grey;
					&.active { color : inherit; }
				}
				&.unfoldAll {
					.tooltipLeft('Unfold All');
					color     : grey;
					&.active { color : inherit; }
				}
				&.history {
					.tooltipLeft('History');
					position  : relative;
					color     : grey;
					border    : none;
					&.active { color : inherit; }
					& > .dropdown {
						right : -1px;
						& > .snippet { padding-right : 10px; }
					}
				}
				&.editorTheme {
					.tooltipLeft('Editor Themes');
					color     : inherit;
					&.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;
		text-wrap      : nowrap;
		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');
	}

	
	.menu-wrapper {
		.menu-item:first-child {
			.caret {
				display: none;
			}
		}
		.menu-list {
			padding          : 0px;
			background-color : #DDDDDD;
			
		}
	}

	.menu-item {
		position    : relative;
		display     : flex;
		justify-content: space-between;
		align-items : center; 
		min-width   : max-content;
		padding     : 5px;
		cursor      : pointer;
		width: 100%;
		.animate(background-color);
		&:is(.menu-list .menu-item) [class*="name"] {
			padding-inline: 8px;
		}
		.menu-name {
			flex: 1;
			text-align: left;
			text-box-trim: trim-end;
		}
		i {
			min-width    : 25px;
			height       : .85rem;
			font-size    : 1.2em;
			text-align   : center;
			&.caret {
				margin-right: 0;
			}
			&.caret:is(.menu-wrapper .menu-wrapper * ) {
				text-align: right;
			}
			/* 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; }
		.disabled { text-decoration : line-through; }
		.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;
		}
		&:disabled {
			color: gray;
			cursor: not-allowed;
			&:hover { background-color: unset; }
		}
	}
	.disabledSnippets {
		color: grey;
		cursor: not-allowed;

		&:hover { background-color: #DDDDDD;}
	}

}
@container editor (width < 750px) {
	.snippetBar {
		.editors { 
			flex            : 1;
			justify-content : space-between;
			border-bottom   : 1px solid;
		}
		.snippets { 
			flex            : 1;
			justify-content : space-evenly; 
		}
		.editors > div.history > .dropdown { right : unset; }
	}
}