/* SECTION LAYOUT */

#export,
#import {
	display: flex;
	flex-direction: column;
	gap: 2em;
	width: 100%;
}

#export h2,
#import h2 {
	font-size: 120%;
	font-weight: bold;
}

/* EXPORT SECTION */

#export .select-all-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1em;
	gap: 0.5em;
	font-weight: bold;
}

#export .project-list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}


#export .project-list li {
	display: block;
}

#export .project-list label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
	padding: 1em;
	width: 100%;
	cursor: pointer;
	font-weight: bold;
	
	border-radius: 0.2em;
	background: var(--secondary-background-color);
	color: var(--secondary-accent-color);
	
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#export .project-list label:is(:hover, :has(:focus-visible)) {
	border-color: var(--button-hover-border-color);
	background: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}

#export .export-form-header {
	display: flex;
	gap: 0.5em;
}

#export .export-form-header > * {
	flex: 1;
}

#export .export-form-header .export-button {
	max-width: 20em;
}

#import .import-options {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* IMPORT SECTION */

#import .file-input-label:hover {
	background: var(--secondary-accent-color);
	color: var(--primary-background-color);
}

#import input[type="file"] {
	display: none;
}

#import .checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

/* PROGRESS INDICATORS */

#export .progress-container:not([hidden]),
#import .progress-container:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

#export progress,
#import progress {
	width: 100%;
	height: 1.5em;
}

#import .import-list:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 1em;
	background: var(--secondary-background-color);
	border-radius: 0.2em;
}

#import .import-list h3 {
	font-size: 120%;
	font-weight: bold;
}

#import .import-list:not([hidden]) ul {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* IMPORT PREVIEW AND RESULTS */

#import .import-list li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 1em;
	border-radius: 0.2em;
	background: var(--primary-background-color);
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#import .import-list li[data-valid="true"] {
	background: var(--primary-background-plus-color);
}

#import .import-list li[data-valid="false"] {
	background: var(--tertiary-background-color);
	opacity: 0.7;
}

#import .import-list .status-label {
	font-size: 87.5%;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0.25em 0.5em;
	border-radius: 0.2em;
	display: inline-block;
}

#import .import-list .status-new {
	background: var(--success-color);
	color: var(--primary-background-color);
}

#import .import-list .status-overwrite {
	background: var(--brand-color);
	color: var(--primary-background-color);
}

#import .import-list .status-invalid {
	background: var(--alert-color);
	color: var(--primary-background-color);
}

#import .import-list .filename {
	flex: 1;
	font-weight: bold;
}

#import .button-bar {
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
}

/* TABBED UI */

#tab-menu {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#tab-menu .tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--muted-color);
	text-decoration: none;
	padding: 0.2em;
}

#tab-menu .tab::after {
	content: '';

	display: block;
	position: absolute;
	top: calc(100% + 0.2em);
	left: 0;
	right: 0;
	height: 0.2em;

	border-radius: 0.1em;
	background-color: var(--brand-color);

	transition: transform 0.2s ease-in-out;
}

#tab-menu .tab span {
	font-size: 120%;
}

[data-tab=export] #tab-menu .export-tab,
[data-tab=import] #tab-menu .import-tab {
	color: var(--brand-color);
}

:is(
	[data-tab=import] #tab-menu .export-tab,
	[data-tab=export] #tab-menu .import-tab
)::after {
	transform: scaleX(0);
}

#tab-container {
	display: flex;
	align-items: flex-start;
	overflow-x: hidden;
}

#tab-container > section {
	flex: 1 0 100%;
}

[data-tab=export] [data-if=import],
[data-tab=import] [data-if=export] {
	opacity: 0;
}

[data-tab=import] [data-if=import],
[data-tab=import] [data-if=export] {
	transform: translateX(-100%);
}

@media (prefers-reduced-motion: no-preference) {
	#tab-container > section {
		transition-property: transform, opacity;
		transition-duration: 0.2s;
		transition-timing-function: ease-in-out;
	}
}

@media (width < 66em) {
	#tab-menu {
		flex-direction: row;
	}
}

/* CONDITIONAL DISPLAY RULES */

#import[data-status=blank] :is([data-if~=pending], [data-if~=finished], [data-not~=blank]),
#import[data-status=pending] :is([data-if~=blank], [data-if~=finished], [data-not~=pending]),
#import[data-status=finished] :is([data-if~=blank], [data-if~=pending], [data-not~=finished]),
#import [data-status=new] :is([data-if~=overwrite], [data-if~=invalid], [data-not~=new]),
#import [data-status=overwrite] :is([data-if~=invalid], [data-if~=new], [data-not~=overwrite]),
#import [data-status=invalid] :is([data-if~=overwrite], [data-if~=new], [data-not~=invalid]),
#import .import-candidate:not([data-imported]) [data-if~=imported],
#import .import-candidate[data-imported] [data-not~=imported] {
	display: none;
}