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

// stylelint-disable selector-disallowed-list -- Selectors are all deprecated.
@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-filterBar-backgroundColor);
	border-radius: var(--pr-t-border-radius-structure);
	border: var(--commons-divider-width) solid var(--commons-border-200);
	container-name: filterBar;
	container-type: inline-size;
	padding: var(--pr-t-spacings-200);

	&:has(.filterBarDeprecated-footer-toggleButton[aria-expanded='false']) {
		.filterBarDeprecated-toggledFilters {
			display: none;
		}
	}

	@at-root ($atRoot) {
		.filterBarDeprecated-toggledFilters {
			margin-block-start: var(--pr-t-spacings-200);
		}

		.filterBarDeprecated-footer {
			border-block-start: var(--commons-divider-width) solid var(--commons-border-200);
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: var(--pr-t-spacings-100);
			justify-content: center;
			margin-block-start: var(--pr-t-spacings-200);
			padding-block-start: var(--pr-t-spacings-200);

			&:empty {
				display: none;
			}

			&:has(.filterBarDeprecated-footer-actions:only-child:empty) {
				display: none;
			}

			@include container.min('S', $name: 'filterBar') {
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.filterBarDeprecated-footer-toggleButton {
			&[aria-expanded='false'] {
				.filterBarDeprecated-footer-toggleButton-labelAlternative {
					display: none;
				}
			}

			&[aria-expanded='true'] {
				.filterBarDeprecated-footer-toggleButton-label {
					@include a11y.mask;
				}

				.lucca-icon {
					transform: rotate(180deg);
				}
			}

			.lucca-icon {
				transition: transform var(--commons-animations-durations-standard);
			}
		}

		.filterBarDeprecated-footer-actions {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: var(--pr-t-spacings-200);
			justify-content: center;
			text-align: center;

			@include container.min('XS', $name: 'filterBar') {
				align-items: center;
				flex-direction: row;
			}

			@include container.min('S', $name: 'filterBar') {
				margin-inline-start: auto;
			}
		}
	}
}