.admin-list__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm);
}

.admin-list__item {
	--buttons-width: 8rem;
	display: flex;
	gap: var(--xs);
	padding: var(--xxs) var(--sm);
	background-color: var(--col-light);
	border-radius: var(--xs);
	transition: var(--transition);

	@media (width >= 800px) {
		&:not(:hover, :has(.admin-list__button:focus-visible)) {
			padding-inline: calc(var(--sm) + var(--buttons-width) / 2);
			.admin-list__buttons {
				/* visibility: hidden; */
				opacity: 0;
				width: 0;
				scale: 0;
			}
		}
	}
	@media (width < 800px) {
		--buttons-width: auto;
		gap: var(--md);
		padding: var(--sm) var(--md);
	}
	@media (width < 500px) {
		flex-direction: column;
		flex: 1;
		text-align: center;
		align-items: center;
	}
}

.admin-list__buttons {
	display: flex;
	width: var(--buttons-width);
	transition: var(--transition);
}

.admin-list__button {
	padding: var(--xxxs);
	@media (width < 800px) {
		padding-inline: var(--sm);
	}
}