// HelpSliderModal Component Styles
body.bb-rl-help-modal-open {
	overflow: hidden;
}

.bb-rl-help-modal-overlay {
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;


	.bb-rl-help-modal {

		@include font-style(14px, 400, 20px);
		background: $bb-rl-background-base-color;
		border-top-left-radius: $bb-rl-radius-xl;
		border-bottom-left-radius: $bb-rl-radius-xl;
		max-width: 720px;
		position: absolute;
		width: 85vw;
		right: 0;
		top: unset;
		bottom: 0;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
		animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		padding-top: 60px;
		height: calc(100vh - 32px); // Calculated height to fit the modal content

		@media screen and (max-width: 782px) {
			height: calc(100vh - 46px);
		}
	}

	.bb-rl-help-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $bb-rl-space-200 $bb-rl-space-300;
		margin: 0;
		border-bottom: 1px solid $bb-rl-border-secondary-color;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		h2 {

			@include bb-rl-heading-bolder;
			margin: 0;
		}
	}

	.bb-rl-help-modal-close {
		background: none;
		border: none;
		font-size: 20px;
		cursor: pointer;
		color: $bb-rl-icon-primary-color;
		line-height: 1;
	}

	.bb-rl-help-modal-content {
		padding: $bb-rl-space-300 $bb-rl-space-400;
		overflow-y: auto;
		height: 100%;
		color: $bb-rl-text-secondary-color;

		p {

			@include font-style(14px, 400, 20px);
			margin: 0 0 $bb-rl-space-200;
		}

		ul {
			margin: $bb-rl-space-100 0 $bb-rl-space-300;
			list-style-type: disc;
			padding-left: 1.5em;
			color: $bb-rl-text-secondary-color;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			margin: $bb-rl-space-100 0 $bb-rl-space-300;

			td {
				padding: $bb-rl-space-50;
			}
		}

		.wp-block-heading {

			@include font-style(16px, 600, 22px);
			margin: 0 0 $bb-rl-space-200;
		}

		.wp-block-embed {
			margin: $bb-rl-space-200 0;

			iframe {
				width: 100%;
				border-radius: $bb-rl-radius-lg;
			}
		}

		.wp-block-image {
			margin: $bb-rl-space-200 0;

			img {
				border-radius: $bb-rl-radius-lg;
			}
		}
	}

	.help-content-loading {
		text-align: center;

		p {
			color: $bb-rl-text-tertiary-color;
		}

		svg path {
			stroke: $bb-rl-border-brand-primary-color;
		}
	}
}


@keyframes slideInRight {

	from {
		transform: translateX(100%);
		opacity: 0;
		right: -100%;
	}

	to {
		transform: translateX(0);
		opacity: 1;
		right: 0;
	}
}
