@import "~scss/_mixins";

html.bodyIndex, html.bodyAuth {
	--color-bg-primary: #000 !important;
	--color-bg-secondary: #252525 !important;

	--color-text-primary: #d4d4d4 !important;
	--color-text-secondary: #9a9a9a !important;
	--color-text-tertiary: #606060 !important;

	--color-shape-tertiary: #2b2b2b !important;
	--color-shape-highlight-medium: rgba(255, 255, 255, 0.05) !important;

	--color-button-stroke: #252525 !important;
	--color-button-black-hover: rgba(37, 37, 37, 0.8);
	--color-button-blank-hover: rgba(23, 23, 23, 0.8);

	--color-input-opaque: rgba(23, 23, 23, 0.6) !important;
	--color-popup: #141414 !important;

	--color-error: #8a351a !important;
	--color-error-background: #240e07 !important;

	--color-control-accent: #d4d4d4 !important;

	--shadow: 0px 0px 0px 1px var(--color-button-stroke) !important;

	body { background: var(--color-bg-primary); color: var(--color-text-secondary); overflow: hidden; }

	#vault,
	#sidebarToggle,
	#sidebarSync,
	#notifications,
	.sidebar,
	.sidebarDummy,
	.shareTooltip { display: none !important; }

	.popup { 
		.innerWrap { background: var(--color-popup) !important;; box-shadow: var(--shadow) !important; color: var(--color-text-primary) !important; }
	}

	#popupConfirm-innerWrap {
		.iconWrapper { background: none; }
		.icon.update { background-image: url('~img/theme/dark/icon/popup/confirm/update.svg'); }
		.icon.updated { background-image: url('~img/theme/dark/icon/popup/confirm/updated.svg'); }
		.icon.error { background-image: url('~img/theme/dark/icon/popup/confirm/error.svg'); }
		.icon.confirm { background-image: url('~img/theme/dark/icon/popup/confirm/confirm.svg'); }

		h1 { font-size: var(--font-size-header3); margin-bottom: 16px; color: var(--color-text-primary) !important; }
		b { display: block; font-weight: 700; color: var(--color-text-primary) !important; margin-bottom: 8px; }
		p { margin-bottom: 8px; }
		ul { list-style-position: inside; padding-left: 0.75em; margin-bottom: 8px; }
		ul.last { margin: 0px; }
	}

	#popupSettingsOnboarding-innerWrap {
		.actionItems, .actionItems .item { border-color: var(--color-button-stroke) !important; }
		.label.small { color: var(--color-text-tertiary) !important; }

		.select { background: var(--color-button-stroke) !important; border-color: var(--color-button-stroke) !important; }
		.select {
			.icon.arrow { background-image: url('~img/theme/dark/arrow/select/dark.svg') !important; }
		}
	}

	.menus {
		.menu.vertical { background: var(--color-popup) !important; box-shadow: var(--shadow) !important; }
		.menu.vertical {
			.item { background: var(--color-popup) !important; }
			.item.hover::before { background: var(--color-shape-highlight-medium) !important; }
		}
		.menu.menuAccountPath {
			.label { color: var(--color-text-secondary) !important; }
			.label.path { color: var(--color-text-primary) !important; }
		}
	}

	.dotIndicator {
		.dot { background-color: var(--color-button-stroke); }
    	.dot.active { background-color: var(--color-text-primary) !important; }
	}

	.tooltip:not(.menuNote) {
		width: 410px; padding: 12px 16px; background: var(--color-popup) !important; color: var(--color-text-secondary) !important; box-shadow: var(--shadow) !important; @include text-common; 
		white-space: normal;
	}
	.tooltip:not(.menuNote) {
		.txt { line-height: 22px; }
		b { display: block; font-weight: 500; color: var(--color-text-primary) !important; }
		ul { list-style-position: inside; padding-left: 0.75em; }
	}

	.tooltip.menuNote { white-space: nowrap; background-color: var(--color-bg-secondary); color: var(--color-text-primary); padding: 4px 8px; @include text-small; }
	.tooltip.menuNote {
		.txt { line-height: 18px; }
	}

	.toast { background: var(--color-shape-tertiary); color: var(--color-text-primary); }
	.toast {
		.inner {
			.buttons {
				.button { color: var(--color-text-primary); }
			}
		}
	}

	/* Notifications */

	.notifications {
		@mixin shadow { box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px #393933 inset; }

		.head {
			.icon { border-color: var(--color-bg-secondary); }
		}

		.notification {	background: var(--color-bg-secondary); @include shadow; border: 0px; }

		.notification {
			.icon.delete { background-color: var(--color-bg-secondary); }
		}
	}

	.loaderWrapper {
		.loader { border-color: #555; border-left-color: var(--color-system-accent-100) !important; }
		.dot { border-color: #fff; }
	}

	.button.disabled { color: var(--color-text-tertiary) }

	.button.black { background: var(--color-button-stroke) !important; color: var(--color-text-primary) !important;  }
	.button.black:not(.disabled):hover { background: var(--color-button-black-hover) !important; color: var(--color-text-primary) !important; }

	.button.blank { border-color: var(--color-button-stroke) !important; color: var(--color-text-primary) !important; background: none; }
	.button:not(.disabled):hover{ background: var(--color-button-blank-hover) !important; }
}

html.bodyAuthDeleted {
	#popupConfirm-innerWrap {
		.buttons { flex-direction: row-reverse; justify-content: space-between; width: 100%; }
	}
}

.pageAuth, .pageIndex {
	.frame { text-align: center; background: none !important; }
	.input { height: 40px; border: solid 1px var(--color-shape-primary) !important; }

	.header { width: 100% !important; }
	.header {
		.icon:hover { background-color: var(--color-shape-tertiary) !important; }
	}
	.footer { width: 100% !important; }

	.icon.arrow.back {
		position: fixed; top: 50%; left: 10px; width: 32px; height: 56px; margin-top: -28px; background-image: url('~img/arrow/auth0.svg');
		z-index: 2;
	}
	.icon.arrow.back:hover { background-image: url('~img/arrow/auth1.svg'); }
	
	.textareaWrap { margin: 0px 0px 32px 0px; }
	.iconObject { margin-bottom: 12px; }
	.moreInfo { @include text-small; color: var(--color-text-tertiary) !important; margin: 16px auto 0px auto; width: 192px; }

	.buttons { display: flex; flex-direction: column; align-items: center; gap: 12px 0px; }
	.button { width: 192px; @include text-common; }
	.button.disabled { color: var(--color-text-tertiary) !important; }
	
	.small { color: var(--color-text-secondary) !important; }
	.small:hover { color: var(--color-text-primary) !important; }

	.error { color: var(--color-error) !important; margin: 0.3em 0px; }
	.withError { background: var(--color-error-background) !important; }
}

.pageIndexIndex, .pageAuthSelect {
	.frame { width: 464px; }
	.logo { 
		width: 464px; height: 229px; background-image: url('~img/logo/index.svg'); background-repeat: no-repeat; background-position: center;
		background-size: contain; margin: 0px 0px 22px 0px;
	}
	.label.descr { @include text-paragraph; margin: 0px auto 22px auto; color: var(--color-text-secondary) !important; width: 456px; }
	.label {
		a { color: var(--color-text-secondary); }
		a:hover { color: var(--color-text-primary); }
	}

	.footer {
		.label.disclaimer { color: var(--color-text-tertiary) !important; }
	}

	@media (max-width: 464px) {
		.frame { width: calc(100% - 32px); }
	}
}

.pageAuthLogin {
	.form { width: 100%; }
	.icon { height: 20px; width: 20px; }
	.error { position: absolute; z-index: 1; width: 100%; left: 0px; top: 0px; transform: translateY(calc(-100% - 16px)); }

	.title { margin: 0px 0px 20px 0px; }
	.phraseWrapper { margin: 0px 0px 20px 0px; background: var(--color-button-blank-hover); }
}

.pageAuthInvite {
	.frame { padding: 64px; }
	.label { width: 500px; }
	.input { text-align: center; border: solid 0px; border-bottom: solid 1px var(--color-shape-primary) !important; font-family: 'Plex'; margin-bottom: 32px; }
}

.pageAuthPinCheck {
	.title { font-size: 22px; margin-bottom: 20px; }
	.pin { display: flex; gap: 0px 8px; flex-direction: row; }
	.pin {
		.input { 
			width: 86px; height: 86px; border-radius: 24px; background: var(--color-input-opaque) !important; padding: 0px; text-align: center; 
			vertical-align: top; font-size: var(--font-size-header3); border-width: 2px; border-color: rgba(0,0,0,0) !important; box-shadow: 0px 0px;
		}
		.input.isFocused { box-shadow: 0px 0px; border-color: var(--color-system-accent-100) !important; }
	}
}

.pageAuthSetup {
	.wrapper { transition: opacity 0.5s ease-in-out; }
	.frame { width: 480px; }
	.title.fromBackup { margin: 0px 0px 12px 0px; }
	.buttons { margin: 24px 0px 0px 0px; }
}

.pageAuthOnboard, .pageAuthInvite, .pageAuthLogin, .pageAuthDeleted, .pageAuthSetup {
	.frame { display: flex; flex-direction: column; align-items: center; }
	.title { @include text-header3; color: var(--color-text-primary) !important; }
	.label { @include text-paragraph; color: var(--color-text-secondary) !important; }
	.bottom { position: fixed; bottom: 24px; left: 0; right: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0px 6px; opacity: 0.6; }
}

.pageAuthOnboard, .pageAuthLogin {
	.frame { width: 1064px; top: 40%; margin-top: 0px !important; }

	@media (max-width: 1160px) {
		.frame { width: calc(100% - 96px); }
	}
}

.pageAuthOnboard {
	.title { margin: 0px 0px 10px 0px; }
	.label { width: 400px; margin: 0px 0px 20px 0px; }
	.dotIndicator { margin: 0px 0px 12px 0px; }
	.button { min-width: 192px; width: auto; }

	canvas { height: 100vh; width: 100vw; }

	.tooltipLink { color: var(--color-text-primary) !important; }
	.tooltipLink:hover { text-decoration: underline; }

	.phraseWrapper { background: var(--color-input-opaque) !important; }
	.phraseWrapper, .inputWrapper { margin: 0px 0px 20px 0px; }
	.phraseWrapper {
		.icon { display: none; }
		.icon.copy { display: block; }
	}

	.inputWrapper {
		.input { 
			border-radius: 26px; border: none !important; background: var(--color-input-opaque) !important; color: var(--color-text-primary) !important; 
			font-size: var(--font-size-header3); padding: 36px 26px; width: 392px; height: auto; 
		}
		.input:hover { filter: brightness(1.2); }
		.input::placeholder { color: var(--color-text-tertiary) !important; }
	}
}

.pageAuthDeleted {
	canvas { height: 100vh; width: 100vw; }

	.title { color: var(--color-text-primary) !important; margin: 0px 0px 10px 0px; }
	.frame { width: 500px; }
	.label { @include text-paragraph; margin: 0px 0px 20px 0px; }

	.pie { margin: 0px 0px 10px 0px; }
	.pie {
		.inner { display: inline-block; padding: 8px; border: 1px solid var(--color-text-secondary) !important; border-radius: 100%; width: 64px; height: 64px; }
	}

	.button { width: 320px; }
	.remove { color: var(--color-red) !important; }
}

.pageAuthMigrate {
	.frame { width: 480px; }
}