@use '@lucca-front/scss/src/commons/utils/namespace';

@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;
	display: block;

	@at-root ($atRoot) {
		.readMore-link.link {
			position: absolute;
			display: flex;
			inset: auto 0 var(--components-readMore-link-insetBlockEnd) auto;
			flex-direction: column;
			z-index: 1;
			line-height: var(--pr-t-font-body-M-lineHeight);
			background-image:
				linear-gradient(
					to right,
					transparent,
					var(--components-readMore-link-backgroudColor) calc(var(--components-readMore-link-paddingInlineStart) - var(--pr-t-spacings-100))
				);
			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			text-decoration: none;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				inset-inline-start: var(--components-readMore-link-paddingInlineStart);
				border-radius: var(--pr-t-border-radius-default);
			}

			&:focus-visible {
				outline: none;

				&::before {
					@include a11y.focusVisible;
				}
			}
		}

		%after {
			content: var(--components-readMore-content-lastChild-content) / '';
			visibility: hidden;
			white-space: nowrap;
			font: var(--pr-t-font-body-M);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			padding-inline-start: var(--components-readMore-link-paddingInlineStart);
		}

		.readMore-content {
			display: -webkit-box;
			-webkit-line-clamp: var(--components-readMore-lineClamp);
			-webkit-box-orient: vertical;
			overflow: hidden;
			padding: var(--pr-t-spacings-50);
			margin: calc(var(--pr-t-spacings-50) * -1);

			$notPlainText: '> p, > ul, > ol, > h1, > h2, > h3, > h4, > h5, > h6';
			$wrappingElements: 'ol, ul';

			&:not(:has(#{$notPlainText})) {
				&::after {
					@extend %after;
				}
			}

			&:has(#{$notPlainText}) {
				> * {
					&:last-child {
						&:not(#{$wrappingElements}) {
							&::after {
								@extend %after;
							}
						}

						&:is(#{$wrappingElements}) {
							> * {
								&:last-child {
									&::after {
										@extend %after;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}