/* styles.css */

:root {
	--main-success: #5caf1a;
}

/* ---------- MODALS REGEX ---------- */
.enveloppe.modals .setting-item.entry {
	border: 0 !important;
	padding: 5px !important;
}

.setting-item-control.regex {
	gap: 0;
}

hr.enveloppe-hr {
	margin: 1px !important;
	padding-bottom: 1px;
}

.enveloppe.modals .setting-item.entry input {
	width: 38%;
	margin: 0 2px;
}

.enveloppe.modals .setting-item.entry .setting-item-info {
	display: none;
}

.enveloppe.modals
	.clickable-icon.setting-editor-extra-setting-button.is-disabled.padding-0 {
	opacity: 0.1;
}

.enveloppe .no-margin {
	margin: 0;
}

/* --------- EXPORT IMPORT --------- */

.enveloppe .setting-item.import-export {
	padding-bottom: 10px;
}

.enveloppe-export-import > .setting-item-info {
	display: flex;
	flex-direction: row;
	gap: 4px;
	overflow: hidden;
	padding: 0;
}

.setting-item.enveloppe-export-import > .setting-item-control {
	padding-bottom: 10px;
}

.enveloppe-import-error {
	display: none;
	color: var(--text-error);
}

.enveloppe-import-error.active {
	display: block;
}

.enveloppe.modals .error {
	border-color: var(--text-error);
	box-shadow: 0 0 0 1px var(--text-error);
}

.enveloppe.modals .padding-0 {
	padding: 0;
}

.modal:has(.enveloppe.modals.manage-repo.edit) {
	width: 100%;
}

.enveloppe.modals.manage-repo .no-display .setting-item-control:has(.mod-cta) {
	margin: 0 100% 5px 0;
}

.enveloppe-import-input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.enveloppe-import-label,
a.enveloppe-copy,
a.enveloppe-download {
	color: var(--text-normal);
	font-size: var(--font-ui-small);
	border-radius: var(--button-radius);
	border: 0;
	padding: var(--size-4-1) var(--size-4-3);
	font-weight: var(--input-font-weight);
	font-family: inherit;
	cursor: pointer;
	background-color: var(--interactive-normal);
	box-shadow: var(--input-shadow);
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color 0.1s ease,
		box-shadow 0.1s ease;
}

.enveloppe-import-label:hover,
a.enveloppe-copy:hover,
a.enveloppe-download:hover {
	background-color: var(--interactive-hover);
	box-shadow: var(--input-shadow-hover);
}

.enveloppe-import-save-button {
	text-align: center;
	width: 100%;
}

.enveloppe-copy,
.enveloppe-download {
	position: relative;
	display: inline-block;
	margin-left: 10px;
}

.enveloppe.modals h1,
.enveloppe.modals h2,
.enveloppe.modals h3,
.enveloppe.modals h4,
.enveloppe.modals h5,
.enveloppe.modals h6 {
	margin-top: 0;
	margin-bottom: 0;
}

.enveloppe-copy:before {
	color: var(--interactive-success);
	content: "✓";
	position: absolute;
	left: -18px;
	font-weight: bold;
	opacity: 0;
	transition: 150ms opacity ease-in-out;
}

.enveloppe-copy.success:before {
	opacity: 1;
}

.enveloppe-export-textarea,
.enveloppe-import-textarea {
	width: 100%;
	height: 200px;
	font-family: var(--font-monospace);
	font-size: 14px;
}

/* --------- GENERAL SETTINGS --------- */

.enveloppe {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.enveloppe textarea {
	width: 250px;
	height: 100px;
}

.enveloppe .mini textarea {
	height: 50px;
}

.enveloppe .border-bottom {
	border-bottom: 1px solid var(--background-modifier-border);
	padding-bottom: 10px;
}

.enveloppe .mini textarea {
	width: 100%;
	height: 50px;
}

.enveloppe .mid-height {
	height: 50%;
}

.enveloppe .bake ul {
	margin-top: 0;
}

/* --------- SETTINGS TABS BAR --------- */
.enveloppe .settings-tab-bar {
	display: flex;
	flex-direction: row;
	gap: 4px;
	overflow: hidden;
	padding: 0;
}

.enveloppe .settings-tab {
	padding: 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 5px;
}

.enveloppe .settings-tab:hover {
	background-color: var(--background-modifier-hover);
}

@media screen and (max-width: 900px) {
	.enveloppe .settings-tab-bar {
		flex-direction: column;
		width: 100%;
	}

	.setting-item.import-export > .setting-item-control {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: start;
	}

	.setting-item.import-export {
		display: grid;
	}

	a.enveloppe-copy + button {
		height: 10%;
	}

	.enveloppe .connect-button {
		margin: 0 !important;
	}
}

@media screen and (max-width: 1200px) {
	.enveloppe .settings-tab-bar {
		flex-wrap: wrap;
	}

	.enveloppe .settings-tab {
		border-bottom: 1px solid var(--background-modifier-border);
	}

	.enveloppe .settings-tab-bar {
		border-bottom: 0;
	}

	.enveloppe.manage-repo button.connect {
		margin: 0 !important;
	}
}

.enveloppe.manage-repo button.connect {
	margin: 0 50%;
}

.enveloppe .settings-tab-active {
	background-color: var(--color-accent);
	color: var(--text-on-accent);
	border: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.enveloppe .settings-tab-name {
	font-weight: bold;
	text-align: center;
}
.enveloppe .settings-tab-icon {
	text-align: center;
}

span.enveloppe.icons {
	vertical-align: middle;
	position: relative;
	padding-right: 5px;
}

.enveloppe .settings-tab-page > .setting-item:first-child {
	margin-top: 15px;
}
.enveloppe .settings-tab-page h5 {
	margin-bottom: 10px !important;
}
.settings-tab-page code,
.enveloppe.list-changed code.code-title,
.code {
	color: var(--code-normal);
	font-family: var(--font-monospace);
	background-color: var(--color-background);
	border-radius: var(--radius-s);
	font-size: var(--code-size);
}

.enveloppe.list-changed .settings-tab-page code.code-title,
.settings-tab-page code.code-title {
	font-size: calc(var(--code-size) * 12px);
	font-weight: bolder;
	text-decoration: underline;
}

.enveloppe .setting-item.title input[type="text"][placeholder="title"] {
	width: 100%;
}

.enveloppe .setting-item.no-display > .setting-item-info {
	display: none;
}

.enveloppe button.max-width {
	width: 100%;
}

.enveloppe.enveloppe.modals.regex.file-path-name .disabled {
	pointer-events: none;
	opacity: 0.5;
	font-style: italic;
	color: var(--text-muted);
	cursor: default;
	box-shadow: none !important;
	border: none !important;
	background-color: transparent !important;
	font-family: var(--font-monospace);
}

.enveloppe.modals {
	border-top: 0 !important;
}

.enveloppe.list-changed h2.success {
	text-align: center;
	color: var(--color-green);
}

.enveloppe.list-changed .error {
	color: var(--text-error);
	border-radius: 5px;
	background-color: rgba(var(--color-red-rgb), 0.1);
	box-shadow: none;
	margin-top: 3px;
	padding-bottom: 10px;
}

.enveloppe.list-changed .error h3 {
	margin-left: 1em;
}

.enveloppe.list-changed .error .list {
	margin-left: 1em;
}

.enveloppe.list-changed .error h2 {
	padding-top: 10px;
	margin-left: 3px;
}

.enveloppe.list-changed .emoji {
	padding-right: 5px;
	font-size: 18px;
}

.enveloppe .important:not(.token) {
	color: var(--text-error);
	font-weight: bold;
}

.enveloppe .warning.embed {
	color: var(--color-orange);
	font-weight: bold;
	border-left: 3px solid var(--color-orange);
	padding-left: 5px;
}
.enveloppe input.error,
.enveloppe .error input {
	border: 1px solid var(--text-error);
}
.enveloppe .max-width input,
.enveloppe .max-width button {
	width: 100%;
}

.enveloppe input.error:active,
.enveloppe input.error:focus {
	border: 2px solid var(--text-error);
	box-shadow: none !important;
}

.enveloppe .display-none .setting-item-info {
	display: none;
}

@keyframes bumpAnimation {
	0% {
		transform: translateY(0);
		/* Pas de déplacement au départ */
	}

	50% {
		transform: translateY(-10px);
		/* Déplacement vers le haut à mi-chemin */
	}

	100% {
		transform: translateY(0);
		/* Retour à la position initiale */
	}
}

@keyframes hourglassRotation {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

span.enveloppe.loading svg {
	/* animate */
	animation: spin 1s linear infinite;
	vertical-align: middle;
}

span.enveloppe.icons svg {
	margin-right: 2px;
}
span.enveloppe.icons svg.lucide-book-check,
span.enveloppe.icons svg.lucide-mail-check {
	/* animation to bump to up */
	animation: bumpAnimation 0.5s ease-in-out;
}

.status-bar-item.plugin-obsidian-mkdocs-publisher.success {
	color: var(--text-success);
}
.status-bar-item.plugin-obsidian-mkdocs-publisher.main-success {
	color: var(--main-success);
	font-weight: bold;
}

.notice:has(.enveloppe.success.notification) {
	background-color: var(--text-success);
	color: green;
	font-weight: bold;
}

.notice:has(.enveloppe.error.notification) {
	background-color: var(--text-error);
	color: white;
}

.notice:has(.enveloppe.load.notification),
.notice:has(.enveloppe.wait.notification) {
	background-color: var(--color-yellow);
	color: black;
}

.status-bar-item.plugin-obsidian-mkdocs-publisher.error {
	color: var(--text-error);
}

span.enveloppe.icons svg.lucide-hourglass {
	/* animation to bump to up */
	animation: hourglassRotation 1s linear infinite;
}

.status-bar-item.plugin-obsidian-mkdocs-publisher svg.lucide-loader {
	animation: hourglassRotation 1s linear infinite;
}