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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;
	flex-grow: 1;
	background-color: var(--components-richTextField-backgroundColor);
	color: var(--components-richTextField-color);
	border-color: var(--components-richTextField-borderColor);
	border-style: solid;
	border-width: 1px;
	border-radius: var(--pr-t-border-radius-input);
	overflow: auto;

	&:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) {
		min-block-size: calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600));

		.richTextField-toolbar-chips {
			border-block-start: 1px solid var(--palettes-neutral-200);
			padding-block-start: var(--pr-t-spacings-100);
		}

		.richTextField-toolbar-formatting {
			padding-block-end: var(--pr-t-spacings-100);
		}
	}

	@at-root ($atRoot) {
		.richTextField-toolbar {
			display: var(--components-richTextField-toolbar-display);
			background-color: var(--components-richTextField-toolbar-backgroundColor);
			border-radius: 0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);
			padding: var(--pr-t-spacings-100);
			overflow: hidden;
			animation-name: fadeIn;
			animation-duration: var(--commons-animations-durations-fast);
			animation-delay: var(--commons-animations-durations-fast);
			opacity: 0;
			flex-shrink: 0;
			animation-fill-mode: forwards;

			@include keyframe.fadeIn;
		}

		.richTextField-toolbar-formatting {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: var(--pr-t-spacings-400);
			flex-shrink: 0;

			&:empty {
				display: none;
			}
		}

		.richTextField-toolbar-col {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			row-gap: var(--pr-t-spacings-100);
			margin-inline-start: calc(var(--pr-t-spacings-400) * -1);
		}

		.richTextField-toolbar-col-group {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			&:not(:only-child) {
				position: relative;
				margin-inline-start: var(--pr-t-spacings-400);

				&::before {
					content: '';
					position: absolute;
					inset: var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);
					inline-size: 2px;
					border-radius: var(--pr-t-border-radius-full);
					background-color: var(--palettes-neutral-300);
				}
			}

			// no nesting of groups within groups
			.richTextField-toolbar-col-group {
				display: contents;
			}
		}

		.richTextField-toolbar-chips {
			display: flex;
			flex-wrap: wrap;
			gap: var(--pr-t-spacings-50);
			padding-block-start: 0;
			border-block-start: 0;
		}

		.richTextField-toolbar-chips-chip {
			border: 0;

			&:focus-visible {
				@include a11y.focusVisible;
			}
		}

		.richTextField-content {
			padding: var(--pr-t-spacings-100);
			outline: none;
			overflow: auto;
			resize: var(--components-richTextField-content-resize);
			min-block-size: var(--components-richTextField-content-minHeight);
			max-block-size: var(--components-richTextField-content-maxHeight);
			block-size: var(--components-richTextField-content-height);
		}

		.richTextField-content-chip {
			vertical-align: middle;

			&:focus-visible {
				@include a11y.focusVisible;
			}
		}

		.richTextField-content-placeholder {
			position: absolute;
			pointer-events: none;
			inset-block-start: 0;
			padding: var(--pr-t-spacings-100);
			user-select: none;
			color: var(--components-richTextField-placeholder-color);
		}
	}
}