documize/gui/app/styles/core/ui/ui-toolbar.scss

%dmz-toolbar {
	display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
	height: 30px;
	padding: 5px 10px;
	line-height: 24px;
	@extend .no-select;
	@include border-radius(6px);

	> .dicon {
		font-size: 16px;
		font-weight: 500;
		color: map-get($gray-shades, 600);
		padding: 0 0.25rem;
		cursor: pointer;

		&:hover {
			color: map-get($gray-shades, 700);
		}
	}

	> .red {
		color: map-get($red-shades, 500);

		&:hover {
			color: map-get($red-shades, 600);
		}
	}

	> .yellow {
		color: map-get($yellow-shades, 600);

		&:hover {
			color: map-get($yellow-shades, 700);
		}
	}

	> .green {
		color: map-get($green-shades, 500);

		&:hover {
			color: map-get($green-shades, 600);
		}
	}
}

.dmz-toolbar-dark-small {
	@extend %dmz-toolbar;
	background-color: map-get($gray-shades, 200);
}

.dmz-toolbar-dark-large {
	@extend %dmz-toolbar;
	background-color: map-get($gray-shades, 200);
	height: 36px;
	padding: 5px 10px;
	line-height: 33px;

	> .dicon {
		font-size: 20px;
		font-weight: 500;
	}
}

.dmz-toolbar-small {
	@extend %dmz-toolbar;
	background-color: transparent;
}

.dmz-toolbar-large {
	@extend .dmz-toolbar-dark-large;
	background-color: transparent;
}

.dmz-toolbar-raised-small {
	@extend %dmz-toolbar;
	background-color: map-get($gray-shades, 100);
	@include button-shadow-light();
}

.dmz-toolbar-raised-large {
	@extend .dmz-toolbar-dark-large;
	background-color: map-get($gray-shades, 100);
	@include button-shadow-light();
}