.toolbar {
	.theme-common-panel-toolbar();
	
	.content {
		display: block;
		font-size: 0.1px;
		padding: 11px;

		& > .item,
		.group > .item {
			.theme-toolbar-item();
			
			cursor: pointer;
			display: inline-block;
			font-size: 10pt;
			height: 30px;
			line-height: 30px;
			margin-right: 8px;
			padding: 1px 7px;
			position: relative;
			vertical-align: middle;
			
			&:hover {
				.theme-toolbar-item-hover();
			}
			
			&:last-child {
				margin-right: 0px;

				html.rtl & {
					margin-left: 0px;
				}
			}
			
			html.rtl & {
				margin-left: 8px;
				margin-right: 0px;
			}
			
			html.mobile & {
				position: static;
			}
			
			& > .icon {
				display: inline-block;
				font-size: 32px;
				//width and height must be equal for the rotated icons
				height: 32px;
				width: 32px;
				text-align: center;
				vertical-align: middle;
				
				.init-icon-font();
				.init-icon-font(after);
				
				&:before {
					display: inline-block;
					vertical-align: baseline;
				}
			}

			& > .text_icon {
				color: rgba(0,0,0, 0.5);
				display: inline-block;
				font-size: 20px;
				height: 30px;
				text-align: center;
				vertical-align: middle;
				width: 30px;
			}

			&.checkstate  {
				float: right;
				margin-right: 0px;

				html.rtl & {
					float: left;
					margin-left: 0px;
				}
			}

			.arrow {
				height: 14px !important;
				width: 14px !important;
				
				&:before {
					content: "\e66d" !important;
					font-size: 16px;
					vertical-align: top;
				}
			}	

			& > .text,
			& .button .text {
				font-size: 13pt;
				font-weight: normal;
			}
			
			& > .text {
				color: @theme-toolbar-item-icon-color;
				display: none;
				vertical-align: middle;
			}

			.hint {
				border-radius: 6px;
				display: inline-block;
				line-height: 22px;
				padding: 0 5px;
				vertical-align: middle;
			}
			
			&.expand {
				.theme-toolbar-item-hover();
			}
		}
	   
		.group {
			display: inline-block;
			margin-right: 8px;
			position: relative;
			vertical-align: middle;

			html.rtl & {
				margin-left: 8px;
				margin-right: 0px;
			}
			
			html.mobile & {
				position: static;
			}

			& > .item {
				border-radius: 0px;
				border-left-width: 0px;
				border-right-width: 1px;
				margin-left: 0px;
				margin-right: 0px;

				html.rtl & {
					border-radius: 0px;
					border-left-width: 1px;
					border-right-width: 0px;
				}

				&:first-child {
					border-radius: 4px 0px 0px 4px;
					border-left-width: 1px;

					html.rtl & {
						border-radius: 0px 4px 4px 0px;
						border-right-width: 1px;
					}
				}

				&.control,
				&:last-child {
					border-radius: 0px 4px 4px 0px;

					html.rtl & {
						border-radius: 4px 0px 0px 4px;
					}
				}
			}
			
			&.expand > .item {
				.theme-toolbar-item-hover();
			}
		}
	}

	.disabled .item,
	.item.disabled {
		.opacity(0.3);
		
		color: #888888;
		cursor: default;
	}
	
	.group,
	.item {
		@import "toolbar-icons.less";
	}
}

.cssanimations .toolbar .item.process .icon:before {
	.animation(cycle 0.8s linear infinite);
}