:import("../button/style.css") { button: button; }
:import("../button-set/style.css") { buttonSet: buttonSet; }
:import("../text/style.css") { text: text; }
:import("../icon/style.css") { icon: icon; }
:import("../grid/style.css") { grid_class: grid; } /* NOTE: Weird alias to avoid conflicting with `display: grid;` */
:import("../progress-bar/style.css") { progressBar: bar; }
:import("../status-indicator/style.css") { statusIndicator: statusIndicator; }
:import("../shared.css") { combinedButton: combinedButton; }

.ribbon {
	composes: notSelectable from "../shared.css";
	display: flex;

	.button {
		width: 100%;
		height: 100%;
		min-width: 16px;

		/* .icon {
			display: block;
			margin: 0px auto 7px auto;
			width: 28px;
			height: 28px;
		} */
	}

	.combinedButton {
		/* display: flex; block, not inline */
		height: 100%;
	}

	.text, .grid_class {
		height: 100%;
	}

	.buttonSet {
		display: flex;
	}
	
	.progressBar, .progressButton {
		height: 100%;
		border-radius: 2px;
	}

	.progressButton {
		display: grid;
	}

	.statusIndicator {
		height: 100%;
	}
}