@use 'exports' as *;

.clear {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&.mod-S {
			@include S;
		}

		&.mod-inverted {
			@include inverted;
		}

		&[disabled] {
			cursor: default;

			@include disabled;
		}

		&[hidden],
		.filterPill[disabled] &,
		.filterPill:not(.is-filled) &,
		.textfield-input[disabled] &,
		.textfield-input:not(.is-filled) & {
			@include hidden;
		}

		.multiSelect.is-selected:has(.multipleSelect-clear) & {
			--components-clear-display: grid;
		}
	}
}