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

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

	@at-root ($atRoot) {
		.breadcrumbs-list {
			display: flex;
			flex-wrap: wrap;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		.breadcrumbs-list-item {
			font: var(--pr-t-font-body-S);
			align-items: center;
			display: flex;

			&:not(:first-child) {
				&::before {
					@include icon.generate('arrow_chevron_right');

					color: var(--palettes-neutral-700);
					font-size: var(--pr-t-font-body-XS-lineHeight);
					padding-block: 0;
					padding-inline: var(--pr-t-spacings-50);
				}
			}
		}

		// Second selector to get rid of breadcrumbs-list-item-action on angular component
		.breadcrumbs-list-item-action,
		.breadcrumbs-list-item > a {
			color: var(--pr-t-color-text-subtle);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: color;
			text-decoration: none;
			background-color: transparent;
			margin: 0;
			padding: 0;
			border: 0;
			cursor: pointer;

			&::before {
				color: var(--palettes-neutral-700);
			}

			&:hover {
				color: var(--pr-t-color-text-subtle);
				text-decoration: underline;
			}

			&:focus-visible {
				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default));
			}
		}
	}
}