/* THIS FILE IS NOT EXPORTED WITH THE HTML FILE! */

body.html-export-running .workspace-tabs:has(.html-progress-wrapper) .workspace-tab-header-container
{
	display: none !important;
}

body.html-export-running :is(.nav-files-container, .side-dock-actions, .workspace-tab-header-container, .workspace-drawer-vault-actions, .nav-buttons-container)
{
	opacity: 0.2 !important;
	pointer-events: none !important;
}

/* Flow list used on the settings page */
.flow-list {
    contain: inline-size;
    gap: 0.2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: -webkit-fill-available;
	background-color: var(--background-secondary);
	border: 1px solid var(--divider-color);
	border-radius: 5px;
	padding: 6px;
}

.flow-item {
    display: flex;
	flex-direction: row;
    border-radius: 100px;
	border: 1px solid var(--divider-color);
    font-size: 0.9em;
    height: min-content;
    width: max-content;
    padding: 3px 8px 3px 8px;
    margin: 0.1em 0em 0.1em 0.0em;
    background-color: var(--background-primary);
	align-items: center;
}

.flow-item:has(input:checked) {
    background-color: hsla(var(--color-accent-hsl), 0.3);
}

.flow-item input[type="checkbox"] {
    padding: 0;
    margin: 0.1em;
    margin-right: 0.5em;
}

.webpage-html-settings .setting-item.is-disabled
{
	opacity: 0.5;
}

/* Progressbar used in the render progress */

.html-progress-bar
{
	width: 300px; 
	height: 15px; 
	background-color: transparent; 
	color: var(--interactive-accent);
}

.html-progress-bar::-webkit-progress-bar {
    background-color: var(--background-secondary);
    border-radius: 500px;
}

.html-progress-bar::-webkit-progress-value {
    background-color: currentColor;
    border-radius: 500px;
}

button.html-progress-cancel
{
	background-color: var(--color-red);
	color: white;
	border: none;
	padding: 0.5em 1em;
	border-radius: 5px;
	margin-top: 1em;
}


.file-list-wrapper
{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height:  -webkit-fill-available;
	margin-left: 1em;
}

.file-list
{
	display: flex;
	flex-direction: column;
	overflow: auto;
	height: 100%;
	width: 100%;
	font-size: 12px;
	line-height: 1.6em;
	border-right: 1px solid var(--divider-color);
	padding-bottom: 4em;
}

.file-list-title
{
	font-size: 20px;
	padding: 0.2em 0 0.5em 0;
	margin-right: 2em;
	text-align: center;
	width: 100%;
}

.file-list-item {
    display: flex;
    align-items: center;
}

.file-list-item-icon
{
	margin-right: 0.5em;
	width: 1.1em !important;
	height: 1.1em !important;
}

.html-progress-wrapper
{
	position: absolute;
	height: 100%;
	min-width: 100%;
	display:flex;
	flex-direction:column;
	background-color: var(--background-primary);
	z-index: 1000;
}

.workspace-tab-container:has(.html-progress-wrapper)
{
	position: relative;
}

.html-progress-content
{
	display: flex;
	height: 100%;
}

.html-progress-inner
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.html-progress-sub
{
	margin-block-start: 2em;
}

.html-progress-log
{
	display:none; 
	flex-direction: column; 
	border-left: 1px solid var(--divider-color); 
	overflow-y: auto; 
	width: 300px; 
	max-width: 300px; 
	min-width: 300px;
}

.html-progress-log > h1
{
	color: var(--color-yellow);
	padding: 0.3em;
	background-color: rgba(100, 70, 20, 0.1);
	margin: 0;
}

/* File picker */

.file-picker .tree-icon {
    border: 1px solid transparent;
    margin: 0px 4px 0px 0px;
    display: flex;
    align-self: center;
}

.file-picker .tree-icon :is(svg, img)
{
	width: 16px !important;
	height: 16px !important;
}

.file-picker .tree-icon *:has(svg, img) {
    display: contents !important;
}

.file-picker a.tree-item-self.is-clickable
{
	text-decoration: none !important;
	text-decoration-line: none !important;
	outline: none !important;
	border: none !important;
}

.file-picker .tree-item-inner > p
{
	display: contents !important;
}

.feature-title
{
  margin: 0 0 1em 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.select-all
{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 0.5em;
}


.file-picker *:before
{
	display: none !important;
}

.file-picker .tree-item > .tree-item-self,
.file-picker .tree-item .tree-item-self:has(> .tree-item-icon)
{
	padding-left: 5px !important;
	display: flex !important;
	align-items: center !important;
}

.file-picker .tree-item-self > *:not(.nav-file-tag, .file-checkbox)
{
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	translate: none !important;
}

.file-picker .tree-item-self > .file-checkbox
{
	margin-right: 1em;
}

.file-picker .tree-item-self > .tree-item-inner
{
	padding: 0 0.3em !important;
}

.file-picker .tree-item-children > *
{
	margin: 0 !important;
	padding: 0 !important;
}

.file-picker .collapse-icon,
.file-picker .collapse-icon *
{
	display: block !important;
}


/* Settings sections */
details.settings-section
{
	padding-left: 2em;
	border-left: 1px solid var(--interactive-accent);
}

details.settings-section > summary
{
	display: flex;
	align-items: center;
	gap: 1em;
	margin-left: -1em;
}

details.settings-section > summary > svg
{
	min-width: 18px;
	min-height: 18px;
	rotate: 0deg;
	transition: rotate 0.2s;
}

details.settings-section[open] > summary > svg
{
	rotate: 90deg;
}