/* WaitComponent */

:root {
	--animating-border-width: 6px;
	--animating-padding: 7px;
	--static-padding: 12px;
}

.som.wait-component > .icon {
	padding: 0.1cm 0 0 0;
}

.som.wait-component > .icon > group > mesh {
	display: none;
}

.som.wait-component.processing > .icon > group > mesh[name=Processing] {
	display: inherit;
}

.som.wait-component.succeeded > .icon > group > mesh[name=Succeeded] {
	display: inherit;
}

.som.wait-component.failed > .icon > group > mesh[name=Failed] {
	display: inherit;
}

.dom.wait-component {
	text-align: center;
	padding: var(--static-padding);
	border: solid 1px var(--dom-primary-color);
	border-radius: var(--dom-container-border-radius);
}

.dom.wait-component.nothing-happening {
	padding: 0;
	border: none;
}

.dom.wait-component.wait-top,
.dom.wait-component.wait-right,
.dom.wait-component.wait-bottom,
.dom.wait-component.wait-left {
	border-color: var(--dom-background-color);
	padding: var(--animating-padding);
	border-width: var(--animating-border-width);
}


.dom.wait-component.wait-top {
	border-top-color: var(--dom-secondary-color);
}

.dom.wait-component.wait-right {
	border-right-color: var(--dom-secondary-color);
}

.dom.wait-component.wait-bottom {
	border-bottom-color: var(--dom-secondary-color);
}

.dom.wait-component.wait-left {
	border-left-color: var(--dom-secondary-color);
}