@import 'common';

.theme-oo-ui-toolbar () {
	&-bar {
		border-bottom: 2px solid rgba(0, 0, 0, 0.15);
		background: #fff;

		.oo-ui-toolbar-bar {
			border: none;
			background: none;
		}
	}

	&-shadow {
		display: none;
	}
}

.theme-oo-ui-tool () {}

.theme-oo-ui-popupTool () {
	.oo-ui-popupWidget {
		/* @noflip */
		margin-left: 1.25em;
		font-size: 0.8em;
	}
}

.theme-oo-ui-toolGroupTool () {
	> .oo-ui-popupToolGroup {
		margin: 0;
	}

	// Like .oo-ui-tool-link in barToolGroup
	> .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
		height: 1.5em;
		padding: 0.25em;

		.oo-ui-iconElement-icon {
			height: 1.5em;
			width: 1.5em;
			opacity: 0.8;
		}
	}

	> .oo-ui-popupToolGroup.oo-ui-labelElement > .oo-ui-popupToolGroup-handle {
		.oo-ui-labelElement-label {
			line-height: 2.1em; // 0.5em less
		}
	}
}

.theme-oo-ui-toolGroup () {
	margin: 0.3em;

	.oo-ui-toolbar-narrow & {
		+ .oo-ui-toolGroup {
			margin-left: 0;
		}
	}

	&.oo-ui-widget-enabled {
		.oo-ui-tool-link {
			.oo-ui-tool-title {
				color: #000;
			}

			.oo-ui-tool-accel {
				color: #888;
			}
		}
	}
}

.theme-oo-ui-barToolGroup () {
	> .oo-ui-toolGroup-tools > .oo-ui-tool {
		> .oo-ui-tool-link {
			height: 1.5em;
			padding: 0.25em;

			.oo-ui-iconElement-icon {
				height: 1.5em;
				width: 1.5em;
				opacity: 0.8;
			}
		}
	}

	&.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
		&.oo-ui-tool-active {
			&.oo-ui-widget-enabled {
				background-color: #eee;
			}
		}

		&.oo-ui-widget-disabled > .oo-ui-tool-link {
			.oo-ui-iconElement-icon {
				opacity: 0.2;
			}
		}

		&.oo-ui-widget-enabled {
			> .oo-ui-tool-link .oo-ui-iconElement-icon {
				opacity: 0.8;
			}

			&:hover > .oo-ui-tool-link .oo-ui-iconElement-icon {
				opacity: 1;
			}
		}
	}

	&.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
		> .oo-ui-tool-link {
			.oo-ui-iconElement-icon {
				opacity: 0.2;
			}
		}
	}
}

.theme-oo-ui-popupToolGroup () {
	height: 2em;
	min-width: 2em;

	.oo-ui-toolbar-narrow & {
		min-width: 1.5em;
	}

	&.oo-ui-iconElement {
		min-width: 2.5em;

		.oo-ui-toolbar-narrow & {
			min-width: 2em;
		}
	}

	&.oo-ui-indicatorElement.oo-ui-iconElement {
		min-width: 3.5em;

		.oo-ui-toolbar-narrow & {
			min-width: 3em;
		}
	}

	&.oo-ui-labelElement {
		.oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
			line-height: 2.6em;
			font-size: 0.8em;
			margin: 0 1em;

			.oo-ui-toolbar-narrow & {
				margin: 0 0.5em;
			}
		}

		&.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
			margin-left: 3em;

			.oo-ui-toolbar-narrow & {
				margin-left: 2.5em;
			}
		}

		&.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
			margin-right: 2.25em;

			.oo-ui-toolbar-narrow & {
				margin-right: 1.75em;
			}
		}
	}

	&-handle {
		.oo-ui-indicatorElement-indicator {
			width: 0.75em;
			height: 0.75em;
			margin: 0.625em;
			top: 0;
			right: 0;

			.oo-ui-toolbar-narrow & {
				right: -0.25em;
			}
		}
		.oo-ui-iconElement-icon {
			width: 1.5em;
			height: 1.5em;
			margin: 0.25em;
			top: 0;
			left: 0.25em;

			.oo-ui-toolbar-narrow & {
				left: 0;
			}
		}
	}

	&-header {
		line-height: 2.6em;
		font-size: 0.8em;
		margin: 0 0.6em;
		font-weight: bold;
	}

	.oo-ui-toolGroup-tools {
		top: 2em;
		background-color: white;
	}

	.oo-ui-tool-link {
		padding: 0.25em 0 0.25em 0.25em;

		.oo-ui-iconElement-icon {
			height: 1.5em;
			width: 1.5em;
			min-width: 1.5em;
		}

		.oo-ui-tool-title {
			padding-left: 0.5em;
		}

		.oo-ui-tool-accel,
		.oo-ui-tool-title {
			line-height: 2em;
			font-size: 0.8em;
		}
	}
}

.theme-oo-ui-listToolGroup () {
	.oo-ui-tool {
		padding: 0 0.75em 0 0.25em;

		&.oo-ui-widget-enabled {
			&:hover {
				background-color: #eeeeee;
			}
		}

		&-active {
			&.oo-ui-widget-enabled,
			&.oo-ui-widget-enabled:hover {
				background-color: #d0d0d0;
			}
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link {
				.oo-ui-tool-title {
					color: #ccc;
				}

				.oo-ui-tool-accel {
					color: #ddd;
				}

				.oo-ui-iconElement-icon {
					opacity: 0.2;
				}
			}
		}
	}

	&.oo-ui-widget-disabled {
		color: #ccc;

		.oo-ui-indicatorElement-indicator,
		.oo-ui-iconElement-icon {
			opacity: 0.2;
		}
	}

	.oo-ui-toolGroup-tools {
		padding: 0.25em 0 0.25em 0;
		border: 1px solid #aaa;
		border-radius: 0.2em;
		box-shadow: inset 0 -0.2em 0 0 rgba(0,0,0,0.2), 0 0.1em 0 0 rgba(0,0,0,0.1);
	}
}

.theme-oo-ui-menuToolGroup () {
	border: 1px solid #ccc;
	border-radius: 0.1em;

	.oo-ui-popupToolGroup-handle {
		min-width: 8em;

		.oo-ui-toolbar-narrow & {
			min-width: 6.5em;
		}
	}

	.oo-ui-toolGroup-tools {
		margin-left: -1px;
		padding: 0.25em 0 0.25em 0;
		border: 1px solid #aaa;
		border-radius: 0.2em;
		border-top-left-radius: 0;
		box-shadow: inset 0 -0.2em 0 0 rgba(0,0,0,0.2), 0 0.1em 0 0 rgba(0,0,0,0.1);
	}

	&.oo-ui-widget-enabled {
		&:hover {
			border-color: #aaa;
		}
	}

	&.oo-ui-popupToolGroup-active {
		border-color: #aaa;
	}

	.oo-ui-tool {
		padding: 0 1em 0 0.25em;

		&-link {
			.oo-ui-iconElement-icon {
				background-image: none;
			}
		}

		&-active .oo-ui-tool-link .oo-ui-iconElement-icon {
			.oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check');
		}

		&.oo-ui-widget-enabled {
			&:hover {
				background-color: #eeeeee;
			}
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link .oo-ui-tool-title {
				color: #ccc;
			}

			.oo-ui-tool-link .oo-ui-iconElement-icon {
				opacity: 0.2;
			}
		}
	}

	&.oo-ui-widget-disabled {
		color: #ccc;
		border-color: #ccc;

		.oo-ui-indicatorElement-indicator,
		.oo-ui-iconElement-icon {
			opacity: 0.2;
		}
	}
}