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

$tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default;
$tc-drawer-padding: tokens.$coral-spacing-m !default;
$tc-drawer-header-height: 3.4375rem !default;
$tc-drawer-header-color: tokens.$coral-color-neutral-text !default;
$tc-drawer-header-background: tokens.$coral-color-neutral-background !default;
$tc-drawer-header-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak !default;
$tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default;
$tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default;

.tc-drawer {
	pointer-events: all;
	background-color: $tc-drawer-bgcolor;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: tokens.$coral-sizing-maximal;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.tc-drawer {
		width: 40vw;
	}
}

@media (min-width: 1200px) {
	.tc-drawer {
		width: 30vw;
	}
}

.tc-drawer-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tc-drawer-tabs-container {
	margin: tokens.$coral-spacing-xs tokens.$coral-spacing-xs 0 tokens.$coral-spacing-xs;
}

.tc-drawer-actionbar {
	padding: 0;
}

.drawer-stacked {
	width: 100%;
}

.tc-drawer-header {
	background-color: $tc-drawer-header-background;
	border-bottom: $tc-drawer-header-border;

	:global {
		.tc-editable-text {
			min-width: 0;
		}

		.tc-editable-text-pencil {
			color: $tc-drawer-header-color;
		}
	}

	&-menu {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: $tc-drawer-header-height;
		padding: $tc-drawer-padding;

		.tc-drawer-header-title {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;

			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			h1 {
				font: tokens.$coral-heading-m;
				flex: 1;
				margin: 0;
				color: $tc-drawer-header-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			:global(.tc-editable-text) {
				flex: 1;
			}

			> .tc-editable-text {
				width: unset;
			}
		}

		.tc-drawer-close-action {
			flex: 0;
			margin-right: -$tc-drawer-padding;
			color: $tc-drawer-header-color;
		}

		.drawer-close-action-tooltip {
			position: absolute;
			right: 0;
			bottom: calc(#{$tc-drawer-padding} / 2);
		}
	}

	&-subtitle {
		padding-top: tokens.$coral-spacing-xxs;
	}
}

.tc-drawer-header-with-tabs {
	margin: 0 tokens.$coral-spacing-xs -0.4rem tokens.$coral-spacing-xs;
}

.tc-drawer-content {
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;

	&-wrapper {
		padding: $tc-drawer-padding;
		flex-grow: 1;
		min-height: 0;
	}
}

.tc-drawer-footer,
.tc-drawer-actionbar-container {
	padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m;
	background: $tc-action-bar-background-color;

	:global {
		.navbar-left,
		.navbar-right {
			> * {
				margin-top: 0;
				margin-bottom: 0;
			}
		}
	}
}

:global(.tc-with-drawer-wrapper) :global(.tc-drawer.stacked)::after {
	background: rgba(0, 0, 0, 0.4);
	content: ' ';
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}

:global(.tc-with-drawer-wrapper:last-child) :global(.tc-drawer.stacked)::after {
	content: none;
}