@layer components {
	.element-filter-list {
		--filter-list-item-padding-x: var(--padding-xs);
		--filter-list-item-padding-left: var(--padding-3xs);
		--max-title-lines: 4;

		@media (min-width: 768px) {
			--max-title-lines: 3;
		}

		@media (min-width: 1280px) {
			--filter-list-item-padding-x: var(--padding-2sm);
			--max-title-lines: 2;
		}
	}

	.filter-list {
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}

	.filter-list-item {
		position: relative;
		display: flex;
		align-items: center;

		padding-block: var(--filter-list-item-padding-x);
		padding-left: var(--filter-list-item-padding-left);

		border-bottom: var(--border-xs) solid var(--border-neutral);

		&:first-child {
			border-top: var(--border-xs) solid var(--border-neutral);
		}

		svg {
			width: var(--size-8);
			height: var(--size-8);
			transition: transform 0.2s;
		}

		&:hover {
			.filter-list-title {
				font-weight: var(--font-weight-bold);
			}
			svg {
				transform: translateX(5px);
			}
		}
	}

	.filter-list-link:focus-visible {
		outline: none;
	}

	.filter-list-link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}
	.filter-list-link:focus-visible::after {
		outline: var(--border-sm) solid var(--color-black);
		outline-offset: 0;
	}

	.filter-list-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);

		min-width: 0;
	}

	.filter-list-title {
		font-size: var(--font-size-large);
		line-height: var(--lh-small);

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--max-title-lines);
		line-clamp: var(---max-title-lines);
		overflow: hidden;
	}

	.filter-list-description {
		font-size: var(--font-size-small);
		line-height: var(--lh-small);
	}
}