@use '@talend/design-tokens/lib/tokens' as tokens;

.drawer {
	width: tokens.$coral-sizing-maximal;
	height: 100%;
	background: tokens.$coral-color-neutral-background;
	display: flex;
	flex-flow: column;
	justify-content: stretch;
	align-items: stretch;
	flex-wrap: nowrap;

	.header {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: tokens.$coral-sizing-l;
		font: tokens.$coral-heading-m;
		flex-flow: column;
		display: flex;
	}

	.body {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;
		overflow: auto;
		flex-flow: column;
		display: flex;
	}

	.footer {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: calc(tokens.$coral-sizing-l + 2 * tokens.$coral-spacing-xs);

		display: flex;
	}
}