/* stylelint-disable color-hex-case */
/* stylelint-disable declaration-no-important */
@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

////
/// Side panel
/// @group Custom widgets
////

$list-item-height: 1.875rem !default;
$toggle-height: 70px;
$toggle-button-opacity: 0.75;
$tc-side-panel-large-padding: 25px !default;
$tc-side-panel-icons-size: tokens.$coral-sizing-xxxs;
$toggle-button-padding: $padding-small;

$docked-width: 3.75rem;
$large-docked-width: 4.375rem;

.tc-side-panel {
	display: flex;
	flex-direction: column;
	font-weight: 500;
	background: tokens.$coral-color-branding-background;
	overflow: hidden;
	position: relative;
	border-right: 1px solid tokens.$coral-color-neutral-border-weak;

	&::before {
		left: 0.625rem;
		bottom: -3.125rem;
	}

	&.animate {
		transition: 0.2s width ease-out;
	}

	.action-list-container {
		flex: 1;
		height: calc(100vh - 7.5rem); // specific to Safari
		overflow-y: auto;
		overflow-x: hidden;

		&::-webkit-scrollbar {
			background-color: tokens.$coral-color-branding-navigation;
			width: tokens.$coral-sizing-minimal;
		}

		:global .tc-side-panel-list {
			background: transparent;
		}

		:global .tc-action-list-item {
			width: calc(100% - 1.25rem);
			background: none !important;
			box-shadow: none !important;

			.btn.btn-link {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: tokens.$coral-color-brand-text;
				font-size: 1rem;
				height: $list-item-height;
				margin: $padding-smaller $padding-small;
				padding: $padding-smaller;
				border-radius: $border-radius-base;

				> span {
					margin-left: $padding-small;
				}

				&:hover {
					background: tokens.$coral-color-brand-background-weak-hover;
					color: tokens.$coral-color-brand-text-hover;
				}
			}

			&.active .btn.btn-link {
				background: tokens.$coral-color-brand-background-selected;
				color: tokens.$coral-color-brand-text-selected;
			}

			.tc-svg-icon {
				width: $tc-side-panel-icons-size;
				height: $tc-side-panel-icons-size;
			}

			:global(svg) {
				margin-left: $padding-smaller;
			}
		}
	}

	.toggle-btn {
		height: $toggle-height;
		vertical-align: center;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: $toggle-button-padding;
		text-align: left;
		flex: 0 0 4.375rem;

		:global {
			.btn.btn-link {
				color: tokens.$coral-color-brand-text;
				line-height: 1;
				height: $toggle-height;
				padding: 0 $padding-small;
				display: inline-block;
				width: auto;
				opacity: $toggle-button-opacity;
				margin: 0 auto;

				> span {
					// .sr-only
					position: absolute;
					width: 1px;
					height: 1px;
					padding: 0;
					margin: -1px;
					overflow: hidden;
					clip: rect(0, 0, 0, 0);
					border: none;
				}

				.tc-svg-icon {
					width: $svg-sm-size;
					height: $svg-sm-size;
					transition: 0.2s transform ease-out;
				}
			}
		}
	}

	&.docked {
		:global {
			.btn.btn-link {
				padding: $padding-normal;

				> span {
					opacity: 0;
				}
			}

			.tc-action-list {
				width: $docked-width;
				min-width: auto;
			}
		}

		.toggle-btn {
			:global {
				.btn.btn-link {
					padding: $padding-small;

					.tc-svg-icon {
						transform: rotate(-180deg);
					}
				}
			}
		}
	}

	&.large {
		.toggle-btn {
			padding-left: 0;

			:global(.btn.btn-link) {
				padding: $padding-small $tc-side-panel-large-padding;
			}
		}

		:global {
			.tc-action-list {
				padding: $padding-smaller 0;
			}

			.tc-action-list-item {
				.btn.btn-link {
					padding: $padding-small; // $tc-side-panel-large-padding;

					.tc-svg-icon + span {
						margin-left: $tc-side-panel-large-padding;
					}
				}
			}
		}

		&.docked {
			:global {
				.tc-action-list {
					width: $large-docked-width;
					min-width: auto;
				}
			}

			.toggle-btn {
				height: $toggle-height;
				vertical-align: center;
				padding: 0;

				.btn.btn-link {
					height: $toggle-height;
					padding: 0;
				}
			}
		}
	}

	&.reverse[role='navigation'] {
		background: tokens.$coral-color-neutral-background-medium;

		&::before {
			content: none;
		}

		:global .tc-action-list-item {
			.btn.btn-link {
				&:hover {
					background: tokens.$coral-color-brand-background-selected;
					color: tokens.$coral-color-brand-text-selected;
				}
			}
		}

		:global {
			.btn.btn-link,
			.tc-svg-icon {
				color: tokens.$coral-color-brand-text-inverted;
				&:hover {
					color: tokens.$coral-color-brand-text-inverted-hover;
				}
			}
		}

		.toggle-btn {
			background-color: transparent;

			:global {
				.btn.btn-link,
				.tc-svg-icon {
					color: tokens.$coral-color-brand-icon-inverted;
				}
			}
		}
	}
}