html {
	--thumb_max_width: 10em;
	--thumb_max_height: 10em;
	--thumb_name_height: 3em;
	--thumb_gap: 0.5em;
	--ui_gap: 0.5em;
	--bg: #111;
	--mg: #222;
	--fg: #aaa;
	--hover: #eee2;
	height: 100%;
}

body {
	display: grid;
	grid-template-areas: 'left-pane left-resize center-pane right-resize right-pane';
	grid-template-rows: 1fr;
	grid-template-columns: 15em var(--ui_gap) 1fr var(--ui_gap) 50%;
	max-width: 100vw;
	max-height: 100vh;
	height: 100%;
	overflow: hidden;
	padding: var(--ui_gap);

	background: var(--bg);
	color: var(--fg);
	font-size: 14px;
	font-family: sans-serif;
}

nav  { display: contents; }
main { display: contents; }

/* layout */

#left-pane    { grid-area: left-pane;    }
#left-resize  { grid-area: left-resize;  }
#center-pane  { grid-area: center-pane;  }
#right-resize { grid-area: right-resize; }
#right-pane   { grid-area: right-pane;   }

.resize { cursor: col-resize; }

.pane {
	background: var(--mg);
	border-radius: var(--ui_gap);
	overflow: hidden;
}

/* left pane */

#left-pane {
	display: grid;
	grid-template-areas: 'nav' 'settings';
	grid-template-rows: 1fr 10em;
}

#dir      { grid-area: nav;      }
#settings { grid-area: settings; }


#dir {
	overflow-y: scroll;
	height: 100%;
	border-bottom: var(--ui_gap) var(--bg) solid;
}

#dir > li {
	padding: var(--ui_gap);
	border-radius: var(--ui_gap);
}
#dir > li:hover {
	background-color: var(--hover);
}

/* center pane */

#center-pane {
	display: grid;
	grid-template-areas: 'thumbs';
}

#thumbs { grid-area: thumbs; }


#thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--thumb_max_width) + var(--thumb_gap)), 1fr));
	grid-template-rows: repeat(auto-fill, calc(var(--thumb_max_height) + var(--thumb_name_height) + var(--thumb_gap)));
	gap: var(--thumb_gap);
	padding: var(--thumb_gap);
	height: 100%;
	overflow-y: scroll;
	min-width: calc(var(--thumb_max_width) + var(--thumb_gap) * 2);
}

#thumbs > li {
	display: grid;
	grid-template-areas: 'thumb' 'name';
	grid-template-rows: var(--thumb_max_height) var(--thumb_name_height);
	border-radius: var(--ui_gap);
	padding: var(--ui_gap);
}

#thumbs > li:hover {
	background: var(--hover);
}

#thumbs > li > img {
	grid-area: thumb;
	max-width:  var(--thumb_max_width);
	max-height: var(--thumb_max_height);
	place-self: center;
}

#thumbs > li > a {
	grid-area: name;
	place-self: center;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* right pane */

#right-pane {
	display: grid;
	grid-template-areas: 'preview' 'exif';
	grid-template-rows: 60% auto;
}

#toFullRes { display:   contents; }
#preview   { grid-area: preview;  }
#exif      { grid-area: exif;     }


#preview {
	max-width: 100%;
	max-height: 100%;
	padding: var(--ui_gap);
	place-self: center;
}

#exif {
	display: grid;
	grid-template-columns: 40% auto;
	padding: var(--ui_gap);
	/*padding-top: 2em;*/
	overflow-y: scroll;
	border-top: var(--ui_gap) var(--bg) solid;
}

#exif dt {
	overflow-x: clip;
	text-overflow: ellipsis;
}

#exif dd {
	overflow-wrap: anywhere;
}

#exif dt, #exif dd {
	padding: var(--ui_gap);
}

#exif dt:hover, #exif dt:hover + dd, #exif dd:hover, #exif dt:has(+ dd:hover) {
	background: var(--hover);
	cursor: pointer;
}

#exif dt::after, #exif dd::after {
	display: none;
	content: 'Copied!';
	padding: var(--ui_gap);
	border-radius: var(--ui_gap);
	top: -2em;
	left: 0;
}

#exif dt::before, #exif dd::before {
	display: none;
	content: '';
	top: calc(sqrt(2) / 2 * 1em * -1);
	left: 3.2ch;
	width: 1em;
	height: 1em;
	transform: rotate(45deg);
}

#exif dt::before, #exif dd::before,
#exif dt::after, #exif dd::after {
	background: var(--bg);
	position: absolute;
}

.copied::before, .copied::after {
	opacity: 1;
	display: unset !important;
}

.copied.fading::before, .copied.fading::after {
	opacity: 0;
	transition: ease-in-out opacity 0.7s 1.2s;
}