@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/components/button/exports' as button;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	border: 0;
	display: block;
	margin: var(--components-divider-margin);
	align-self: var(--components-divider-alignSelf);

	&:where(:empty) {
		block-size: auto;

		&:not(.mod-vertical) {
			border-block-start: var(--commons-divider-border);
		}
	}

	&:not(:empty) {
		display: flex;
		flex-direction: var(--components-divider-direction);
		align-items: center;
		text-wrap: balance;
		text-align: center;
		font: var(--components-divider-font);
		color: var(--palettes-neutral-600);
		gap: var(--pr-t-spacings-100);
		justify-content: var(--components-divider-justify);

		&::before,
		&::after {
			flex-grow: 1;
			content: '';
		}

		.lucca-icon {
			color: var(--palettes-neutral-600);
			position: relative;
			inset-block-end: var(--components-divider-iconBottom);
		}

		&:not(.mod-vertical) {
			&::before,
			&::after {
				border-block-start: var(--commons-divider-border);
				min-inline-size: var(--components-divider-minSize);
			}
		}
	}

	.button {
		@include button.outlined;
	}
}