@import url('./transitions.css');

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--red: hsl(0, 74%, 67%);
	--green: hsl(100, 68%, 58%);
	--blue: oklch(59.12% 0.153 230.82);
}
body {
	font-family: system-ui;
	padding: 1rem;
	max-width: 800px;
	margin: 5% auto;
	padding-bottom: 100vh;
}

h1,
h2,
ul {
	margin-bottom: 1rem;
}

:focus-visible {
	box-shadow: 0 0 0 3px gold;
	outline: 0;
}

/*
* Lists
*/
:where(ul[class]) {
	list-style: none;
	padding: 0;
}
:where(ul:not([class])) {
	list-style-type: '> ';
	padding-left: 1rem;
	& li {
		padding-block: 0.2em;
	}
}
:where(a) {
	color: var(--blue);
	text-decoration: none;
}

/*
* List
*/
.filters {
	display: flex;
	gap: 1rem;
}
.filters a,
a.button {
	padding: 0.2em 0.5em;
	border: 1px solid var(--blue);
	border-radius: 0.5em;
	&.is-active,
	&:hover {
		background: var(--blue);
		color: white;
	}
}
.list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 1rem;
}
.list_item {
	border-radius: 100%;
	background: black;
}
.list_item--red {
	background: var(--red);
}
.list_item--green {
	background: var(--green);
}
.list_item_link {
	display: flex;
	color: white;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	text-decoration: none;
	font-size: 2rem;
}

/*
* Modals
*/
.modal {
	max-width: 600px;
	padding: 1rem;
}
.modal_close {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}
