@use '@talend/bootstrap-theme/src/theme/guidelines' as *;

.tc-with-drawer {
	height: 100%;
	position: initial;
	display: flex;
	flex-direction: column;
	// Need to go above the Switcher buttons https://github.com/Talend/ui/blob/master/packages/design-system/src/components/Switch/Switch.style.ts#L12
	z-index: 3;
}

.tc-with-drawer-container {
	width: 100%;
	top: 0;
	right: 0;
	// Need to go above the Typeahead icon https://github.com/Talend/ui/blob/f5bc529001c63cad7a6921e1284751efd750a579/packages/components/src/Typeahead/Typeahead.scss#L92
	z-index: 2;
}

.tc-with-drawer-container > div {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	pointer-events: none;
}

.tc-with-drawer-container > div {
	@for $i from 1 through 10 {
		&:nth-child(#{$i}) :global(.stacked) {
			$width: 100% - (($i * 2) - 2);
			width: $width;
		}
	}
}