@import 'common';

.theme-oo-ui-toolbar () {
	&-bar {
		border-bottom: 1px solid #ccc;
		.oo-ui-vertical-gradient(#fff, #F1F7FB);

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

	&-actions {
		> .oo-ui-buttonElement {
			margin-top: 0.4em;
			margin-bottom: 0.4em;
		}

		> .oo-ui-buttonElement:last-child {
			margin-right: 0.5em;
		}
	}

	&-shadow {
		.oo-ui-background-image('@{oo-ui-default-image-path}/toolbar-shadow.png');
		bottom: -9px;
		height: 9px;
		opacity: 0.5;
		.oo-ui-transition(opacity 500ms ease-in-out);
	}
}

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

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

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

	// Like .oo-ui-tool in barToolGroup
	&:first-child > .oo-ui-popupToolGroup {
		border-top-left-radius: 0.3125em;
		border-bottom-left-radius: 0.3125em;
	}

	&:last-child > .oo-ui-popupToolGroup {
		border-top-right-radius: 0.3125em;
		border-bottom-right-radius: 0.3125em;
	}

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

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

	> .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.375em;
	border-radius: 0.3125em;
	border: 1px solid transparent;
	.oo-ui-transition(border-color 300ms ease-in-out);

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

	&.oo-ui-widget-enabled {
		&:hover {
			border-color: rgba(0,0,0,0.1);
		}

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

.theme-oo-ui-barToolGroup () {
	> .oo-ui-toolGroup-tools > .oo-ui-tool {
		margin: -1px 0 -1px -1px;
		border: 1px solid transparent;

		&:first-child {
			border-top-left-radius: 0.3125em;
			border-bottom-left-radius: 0.3125em;
		}

		&:last-child {
			margin-right: -1px;
			border-top-right-radius: 0.3125em;
			border-bottom-right-radius: 0.3125em;
		}

		> .oo-ui-tool-link {
			height: 1.875em;
			padding: 0.3125em;

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

			.oo-ui-tool-title {
				line-height: 2.1em; // 0.5em less
			}
		}
	}

	&.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool {
		&.oo-ui-widget-enabled:hover {
			border-color: rgba(0,0,0,0.2);
		}

		&.oo-ui-tool-active {
			&.oo-ui-widget-enabled {
				border-color: rgba(0,0,0,0.2);
				box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);
				.oo-ui-vertical-gradient(#F1F7FB, #fff);
			}

			&.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
				border-left-color: rgba(0,0,0,0.1);
			}
		}

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

		&.oo-ui-widget-enabled {
			&: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: 2.5em;
	min-width: 2.5em;

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

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

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

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

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

	&.oo-ui-labelElement {
		.oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
			line-height: 2.6em;
			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.9375em;
			height: 0.9375em;
			margin: 0.78125em;
			top: 0;
			right: 0;

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

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

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

	&-active.oo-ui-widget-enabled {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);

		.oo-ui-vertical-gradient(#F1F7FB, #fff);
	}

	.oo-ui-toolGroup-tools {
		top: 2.5em;
		margin: 0 -1px;
		border: 1px solid #ccc;
		background-color: white;
		box-shadow: 0 0.3125em 1.25em rgba(0,0,0,0.25);
	}

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

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

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

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

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

.theme-oo-ui-listToolGroup () {
	.oo-ui-toolGroup-tools {
		padding: 0.3125em;
	}

	&.oo-ui-popupToolGroup-active {
		border-color: rgba(0,0,0,0.2);
	}

	.oo-ui-tool {
		border: 1px solid transparent;
		margin: -1px 0;
		padding: 0 0.625em 0 0;

		&-active {
			&.oo-ui-widget-enabled {
				border-color: rgba(0,0,0,0.1);
				box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);
				.oo-ui-vertical-gradient(#F1F7FB, #fff);

				+ .oo-ui-tool-active.oo-ui-widget-enabled {
					border-top-color: rgba(0,0,0,0.1);
				}
				&:hover {
					border-color: rgba(0,0,0,0.2);
				}
			}
		}

		&.oo-ui-widget-enabled {
			&:hover {
				border-color: rgba(0,0,0,0.2);
			}
			&:hover .oo-ui-tool-link .oo-ui-iconElement-icon {
				opacity: 1;
			}
		}

		&.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;
		}
	}
}

.theme-oo-ui-menuToolGroup () {
	border-color: rgba(0,0,0,0.1);

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

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

	.oo-ui-toolGroup-tools {
		padding: 0.3125em 0 0.3125em 0;
	}

	&.oo-ui-widget-enabled {
		&:hover {
			border-color: rgba(0,0,0,0.2);
		}
	}

	&.oo-ui-popupToolGroup-active {
		border-color: rgba(0,0,0,0.25);
	}

	.oo-ui-tool {
		padding: 0 1.25em 0 0.3125em;

		&-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: #e1f3ff;
			}
		}

		&.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: rgba(0,0,0,0.05);

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