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

$tc-popover-border-width: 0.0625rem !default;
$tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default;
$tc-popover-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default;
$tc-popover-body-min-height: 6.25rem !default;
$tc-popover-body-max-height: 18.75rem !default;
$tc-popover-max-width: 25rem !default;
$tc-popover-header-border-color: tokens.$coral-color-neutral-border-weak !default;
$tc-popover-header-footer-height: 4.375rem !default;

:global(.popover) {
	padding: 0;
	border: $tc-popover-border-width solid $tc-popover-border-color;
	border-radius: $border-radius-base;
	background-color: tokens.$coral-color-neutral-background;
	box-shadow: $tc-popover-box-shadow;
	max-width: $tc-popover-max-width;
}

:global(.popover-content) {
	padding: 0;
}

.body,
.footer:not(:empty),
.header:not(:empty) {
	display: flex;
}

.footer:not(:empty),
.header:not(:empty) {
	padding: 0 $padding-large;
	height: $tc-popover-header-footer-height;
	min-width: $tc-popover-max-width;
}

.footer:not(:empty) {
	overflow: hidden;
	border-top: $tc-popover-border-width solid $tc-popover-header-border-color;
	justify-content: space-between;
	align-items: center;

	> :global(.tc-actionbar-container) {
		background-color: tokens.$coral-color-neutral-background;
		padding: 0;
	}
}

.header:not(:empty) {
	border-bottom: $tc-popover-border-width solid $tc-popover-header-border-color;

	:global(.btn) {
		margin-top: $padding-normal;
		margin-bottom: $padding-normal;
	}
}

.header:not(:empty) + .body {
	margin-top: 0;
	margin-bottom: 0;
}

.body {
	display: flex;
	flex-direction: row;
	margin: $padding-large;
	color: tokens.$coral-color-neutral-text;
}

.content:not(:empty) {
	// wrapper used to fix the ie11 bug with flexbox when (align-items: center & min-height)
	// https://stackoverflow.com/a/47180276
	width: 100%;
	display: flex;
	flex-direction: row;
	min-height: $tc-popover-body-min-height;
	max-height: $tc-popover-body-max-height;

	> p {
		// specify max-height min-height to IE11
		max-height: inherit;
		min-height: inherit;
		overflow: auto;
		margin: 0;
	}

	> :global(.tc-circular-progress) {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}
}

.rich-layout {
	:global(.tc-resource-list) {
		margin: 0 (-1 * $padding-large);
		flex-grow: 1;
	}
}