@import 'ansyn/less/common';
@import 'ansyn/less/colors';
@import "ansyn/less/z-index-globals";

:host {
	display: block;
	height: 100%;

	div.tools-menu-item-container {
		display: flex;
		flex-direction: row;
		padding: 5px 0;

		div {
			position: relative;
			padding: 0 5px;
			margin: 5px 0;

			button {
				margin: 0;
				padding: 0;
				border: none;
				color: white;
				background: @background-color-6;
				box-sizing: border-box;
				outline: none;
				width: 34px;
				height: 34px;
				border-radius: 5px;
				
				i {
					vertical-align: middle;
				}

				&:disabled {
					opacity: .6;
					cursor: not-allowed;
				}

				&.mode-on {
					border: 1px solid @application-contrast-color;
				}

				&:hover:not(:disabled), &.active {
					border: 1px solid @application-primary-color;
					border-radius: 1px;
				}
			}

			&.user-annotations {
				.icon-annotations {
					font-size: 26px;
					padding-left: 2px;
				}

				button {

					display: flex;
					justify-content: center;
					align-items: center;

					span {
						font-size: 22px;
						color: white;
					}
				}
			}
		}
	}

}
