.DirectoryList {
	--scale: 1rem;
	
	position: relative;
	width: 100%;
	height: 100%;
}

.FileButton, .FolderButton {
	--gap: 0.25rem;

	display: flex;
	gap: var(--gap);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(var(--scale) * 7.5);
	height: calc(var(--scale) * 7.5);
	padding: 0.5rem;
	background: none;
	border: none;
	border-radius: var(--border-radius-1);
	outline: none;
	cursor: pointer;
	transition: background-color 100ms ease-in-out;
}

.FileButton[data-selected=true],
.FolderButton[data-selected=true] {
	background-color: color-mix(in srgb, var(--background-color-0) 40%, transparent) !important;
}

.FileButton:hover,
.FolderButton:hover,
.FileButton:focus-visible,
.FolderButton:focus-visible {
	background-color: color-mix(in srgb, var(--background-color-0) 20%, transparent);
}

.FileButton p, .FolderButton p {
	max-width: 100%;
	margin: 0;
	word-wrap: break-word;
}

.FileIcon, .FolderIcon {
	max-height: calc(100% - 1rem - var(--gap));
	border-radius: inherit;
}

.FileIcon div, .FolderIcon div {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

.FileIcon svg, .FolderIcon svg {
	width: 50%;
	height: auto;
	aspect-ratio: 1;
}

.SelectionRect {
	opacity: 25%;
	position: absolute;
	border-radius: var(--border-radius-0);
	background-color: var(--blue-1);
	border: 0.25rem solid var(--blue-0);
}