@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

span.tp-aggregate-remove-ag-button {
	.cdx-mixin-css-icon( @cdx-icon-trash, @color-destructive, @size-icon-small );
	cursor: pointer;
	margin: @spacing-25;
}

span.tp-aggregate-remove-button {
	.cdx-mixin-css-icon( @cdx-icon-trash, @color-destructive, @size-icon-small, @param-vertical-align: middle );
	cursor: pointer;
	margin: @spacing-25;
}

span.tp-aggregate-edit-ag-button {
	.cdx-mixin-css-icon( @cdx-icon-edit, @color-progressive, @size-icon-small );
	cursor: pointer;
	margin: @spacing-25;
}

span.tp-toggle-group {
	font-size: 16px;
	margin-right: 1em;
	margin-left: 0.5em;
}

.tpt-add-new-group {
	a& {
		display: inline-block;
		margin-bottom: 1em;

		&::before {
			content: '';
			.cdx-mixin-css-icon( @cdx-icon-add, currentColor, @param-vertical-align: bottom );
		}
	}

	div& {
		margin-bottom: 1em;
	}
}

h2.tp-name {
	/** Allows the outline for the toggle icon to be visible **/
	overflow: visible;
}

.tp-toggle-group-icon {
	background: @background-color-transparent;
	border: 0;
	cursor: pointer;
	margin-right: @spacing-50;

	&::before {
		content: '';
		.cdx-mixin-css-icon( @cdx-icon-expand );
		width: @size-150;

		.mw-tpa-group.mw-tpa-group-open & {
			.cdx-mixin-css-icon( @cdx-icon-collapse );
			width: @size-150;
		}
	}

	&:focus {
		outline: 1px dotted;
	}
}

.mw-tpa-group:not( .mw-tpa-group-open ) .tp-sub-groups {
	display: none;
}

input {
	&.tp-aggregategroup-add-name {
		width: 250px;
	}

	&.tp-aggregategroup-add-description {
		width: 500px;
	}
}

div.hidden {
	display: none;
}

.tp-edit-group {
	margin-top: 1.5em;
}

.tp-aggregategroup-edit-name {
	width: 250px;
}

.tp-aggregategroup-edit-description {
	width: 500px;
}

.mw-tpa-groups .tes-entity-selector {
	display: inline-block;
	width: 500px;
}

.client-nojs {
	.tpt-add-new-group,
	.tp-aggregate-edit-ag-button,
	.tp-aggregate-remove-button,
	.tp-aggregate-remove-ag-button,
	.mw-tpa-group input {
		display: none;
	}
}

.client-js .tux-nojs {
	display: none;
}

.tpt-aggregategroup-nogroups {
	margin-bottom: 1em;
}