@use '@lucca-front/icons/src/icon/exports' as icon;

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

@use '@lucca-front/scss/src/components/clear/exports' as clear;
@use '@lucca-front/scss/src/components/segmentedControl/exports' as segmentedControl;
@use '@lucca-front/scss/src/components/textField/exports' as textField;
@use '@lucca-front/scss/src/components/divider/exports' as divider;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	align-items: flex-start;
	flex-wrap: var(--components-filterBar-flexWrap);
	gap: var(--pr-t-spacings-100);

	.textField {
		@include textField.filterPill;
	}

	@at-root ($atRoot) {
		.filterBar-divider.divider {
			@include divider.vertical;

			margin-inline: var(--pr-t-spacings-50);

			&:last-child {
				display: none;
			}
		}

		.filterBar-scrollBox {
			flex-grow: var(--components-filterBar-scrollBox-flexGrow);
		}

		.filterBar-segmentedControl.segmentedControl {
			@include segmentedControl.S;
		}

		.filterBar-scrollBox-group {
			display: flex;
			gap: var(--pr-t-spacings-100);
			flex-wrap: var(--components-filterBar-scrollBox-group-flexWrap);
			flex-grow: 1;
			flex-shrink: 1 !important;
		}

		.filterBar-scrollBox-export {
			margin-inline-start: auto;
			padding-inline-start: var(--pr-t-spacings-200);
			flex-shrink: 0;
		}
	}
}