@zeix/ui-element/docs-src/components/todo-app/todo-app.css

UIElement - minimal reactive framework based on Web Components

todo-app {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	container-type: inline-size;

	& form {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-m);
		justify-content: space-between;
	}

	& ol {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		list-style: none;
		margin: 0;
		padding: 0;

		& li {
			display: flex;
			justify-content: space-between;
			gap: var(--space-m);
			margin: 0;
			padding: 0;
		}
	
		&[filter="completed"] li:not(:has([checked])) {
			display: none;
		}
	
		&[filter="active"] li:has([checked]) {
			display: none;
		}
	}

	& footer {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: center;
		gap: var(--space-m);
		margin: 0;

		.todo-count {
			justify-self: start;
			
			& p {
				font-size: var(--font-size-s);
				margin: 0;
			}
		}
  
		.clear-completed {
			justify-self: end;
		}
	}
}

@container (width > 32rem) {
	todo-app form {
		flex-direction: row;
		align-items: flex-end;
	}
}