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

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

	@at-root ($atRoot) {
		.collapse-title {
			margin-block-end: var(--pr-t-spacings-50);
			display: inline-flex;
			overflow: hidden;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}

			&:focus-within,
			&:hover {
				color: var(--palettes-neutral-900);
			}

			&::before {
				@include icon.generate('arrow_chevron_right');

				font-size: var(--pr-t-font-body-XS-fontSize);
				margin-inline-end: var(--pr-t-spacings-50);
				transition-duration: var(--commons-animations-durations-fast);
				transition-property: transform;
				vertical-align: middle;
			}
		}
	}
}