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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-filters-background);
	box-shadow: 0 1px 0 0 var(--commons-border-200);
	min-block-size: var(--components-filters-height);
	align-items: center;
	display: flex;
	position: relative;
	z-index: 99;

	@at-root ($atRoot) {
		.filters-sectionLeft {
			align-items: center;
			display: flex;
			padding-inline-end: var(--pr-t-spacings-400);
		}

		.filters-sectionRight {
			align-items: center;
			display: flex;
			margin-inline-start: auto;
			padding-inline-start: var(--pr-t-spacings-400);

			.textfield.mod-framed {
				border-inline-start: var(--commons-divider-width) solid var(--commons-divider-color);
				border-inline-end: 0 !important;
			}
		}
	}

	.textfield.mod-framed {
		border-inline-end: var(--commons-divider-width) solid var(--commons-divider-color);
		max-inline-size: 16rem;

		.textfield-input {
			box-shadow: none !important;
		}
	}
}