@import "~scss/_mixins";

html.bodyIndex, html.bodyAuth {
	body { overflow: hidden; }

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

	/* 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); }
		}
	}

	.pageFlex {
		> .page { transition: background-color linear 0.2s; }
	}
}

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

.pageAuth, .pageIndex {
	.frame { text-align: center; background: none !important; transition: opacity $easeInQuint 0.2s; z-index: 21; }
	.frame.invisible { opacity: 0; }
	.input { height: 40px; text-align: center; }

	.header { width: 100% !important; z-index: 22; }
	.footer { width: 100% !important; }
	
	.textareaWrap { margin: 0px 0px 32px 0px; }
	.iconObject { margin-bottom: 12px; }

	.buttons { display: flex; flex-direction: column; align-items: center; gap: 12px 0px; }
	.button { min-width: 224px; @include text-common; font-weight: 400; }
	.button.disabled { color: var(--color-text-tertiary) !important; background-color: var(--color-control-inactive) !important; }
	.button.c48 { border-radius: 24px; }
	.button.accent { font-weight: 500; }
	.button.blank { border: 0px; background: var(--color-shape-highlight-medium); }
	.button.blank:not(.disabled):hover,
	.button.blank:not(.disabled).hover { background: var(--color-shape-highlight-dark) !important; }

	.small { color: var(--color-text-secondary) !important; }
	.small:hover { color: var(--color-text-primary) !important; }

	.error { margin: 0.3em 0px; }
}


.pageIndexIndex, .pageAuthSelect { background-color: var(--color-shape-tertiary); }
.pageIndexIndex, .pageAuthSelect {
	.frame { width: 720px; }

	.intro { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px 0px; margin-bottom: 32px; }
	.intro {
		.label { margin: 0px; line-height: 60px; font-weight: 400;  }
		.label.line1 { font-size: 58px; letter-spacing: -3.77px; color: var(--color-text-primary); }
		.label.line2 { font-size: 64px; font-family: 'RiccioneExtraLight'; letter-spacing: -1.74px; color: var(--color-text-secondary); }
	}

	$easingBubbleWrapper: cubic-bezier(0.5, 0, 0.75, 0);
	@keyframes bubble {
		0%, 100% { transform: scale3d(0.9, 0.9, 1);  }
		50% { transform: scale3d(1.1, 1.1, 1); }
	}

	.bubbleWrapper {
		position: absolute; width: 154px; height: 154px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
		display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all $easingBubbleWrapper 1s;
	}
	.bubbleWrapper {
		.bubble { animation: bubble ease-in-out infinite 3.2s; border-radius: 50%; width: 100%; height: 100%; background-color: transparent; }
		.bubble {
			.img { width: 100%; height: 100%; background-size: 100%; background-image: url('~img/icon/bubble.svg'); transition: opacity $easingBubbleWrapper 1s; }
		}
	}
	.bubbleWrapper.inflate { width: 150vw; height: 150vw; }
	.bubbleWrapper.inflate {
		.bubble { transition: background-color ease-in-out 1s; background-color: var(--color-bg-primary); animation-play-state: paused; }
		.bubble {
			.img { opacity: 0; }
		}
	}

	.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); }
	}

	.buttons { display: flex; flex-direction: column; gap: 12px 0px; justify-content: center; width: 100%; }

	.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)); }

	.phraseWrapper { margin: 0px 0px 40px 0px; background-color: var(--color-shape-tertiary); }
}

.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; padding: 0px; text-align: center;
			vertical-align: top; font-size: var(--font-size-header3); border-width: 2px; box-shadow: 0px 0px;
		}
		.input.isFocused { box-shadow: 0px 0px; }
	}
}

.pageAuthSetup {
	.wrapper { transition: opacity 0.5s ease-in-out; }
	.frame { width: 480px; }
	.title.fromBackup { margin: 0px 0px 12px 0px; }
	.title:not(.fromBackup) { @include text-header3; }

	.buttons { margin: 24px 0px 0px 0px; gap: 14px; }
	.button { min-width: 120px; }
	.button.simple { font-weight: 400; }

	.icon.warning { width: 56px; height: 56px; background-image: url('~img/icon/popup/confirm/warning-grey.svg'); margin: 0px 0px 20px 0px; }
}

.pageAuthOnboard, .pageAuthInvite, .pageAuthLogin, .pageAuthDeleted, .pageAuthSetup {
	.frame { display: flex; flex-direction: column; align-items: center; }
	.title { @include text-header1; 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; }
	.title { margin: 0px 0px 8px 0px; }
	.label.description { margin: 0px 0px 32px 0px; }

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

.pageAuthOnboard {
	.label.description { width: 508px; }
	.buttons { flex-direction: column; gap: 12px 0px; }

	.tooltipLink:hover { text-decoration: underline; }

	.stagePhrase {
		.label.description { margin-bottom: 8px; }

		.learnMore { display: flex; align-items: center; gap: 0px 8px; margin-bottom: 32px; }
		.learnMore {
			.icon { width: 18px; height: 18px; background-image: url('~img/icon/onboarding/plus0.svg'); }
			.label { @include text-paragraph; font-weight: 500;}
		}
		.learnMore:hover {
			.icon { background-image: url('~img/icon/onboarding/plus1.svg'); }
			.label { color: var(--color-text-primary) !important; }
		}

		.phraseWrapper { background-color: var(--color-shape-tertiary); margin: 0px 0px 32px 0px; }
	}

	.inputWrapper { margin: 0px 0px 24px 0px; }
	.inputWrapper {
		.input { @include text-paragraph; font-weight: 500; background-color: var(--color-shape-tertiary); border-radius: 20px; border: 0px; padding: 0px 26px; height: 64px; width: 480px; }
	}

	.optionsWrapper {
		display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 720px; margin-bottom: 32px;
		opacity: 1 !important; transform: scale3d(1, 1, 1) !important;
	}
	.optionsWrapper {
		.option {
			position: relative; display: flex; gap: 0px 6px; align-items: center; width: unset; padding: 0px 14px; height: 52px;
			@include text-common; font-weight: 500; background: var(--color-shape-highlight-light); border-radius: 16px;
		}
		.option:hover,
		.option.selected { background-color: var(--color-system-selection); }
		.option.selected:after {
			content: ''; position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%;
			background: var(--color-system-accent-100) url('~img/icon/onboarding/tick.svg') 50% 50% no-repeat;
		}

		.option {
			.label { color: var(--color-text-secondary); @include text-common; }
		}
		.option.selected {
			.label { color: var(--color-text-primary) !important; }
		}

		.icon { width: 32px; height: 32px; background-size: 32px; }
		.icon.student { background-image: url('~img/icon/onboarding/options/student.png'); }
		.icon.manager { background-image: url('~img/icon/onboarding/options/manager.png'); }
		.icon.softwareDeveloper { background-image: url('~img/icon/onboarding/options/developer.png'); }
		.icon.writer { background-image: url('~img/icon/onboarding/options/writer.png'); }
		.icon.designer { background-image: url('~img/icon/onboarding/options/designer.png'); }
		.icon.artist { background-image: url('~img/icon/onboarding/options/artist.png'); }
		.icon.marketer { background-image: url('~img/icon/onboarding/options/marketer.png'); }
		.icon.consultant { background-image: url('~img/icon/onboarding/options/consultant.png'); }
		.icon.entrepreneur { background-image: url('~img/icon/onboarding/options/founder.png'); }
		.icon.researcher { background-image: url('~img/icon/onboarding/options/researcher.png'); }
		.icon.messaging { background-image: url('~img/icon/onboarding/options/messaging.png'); }
		.icon.knowledge { background-image: url('~img/icon/onboarding/options/knowledge.png'); }
		.icon.noteTaking { background-image: url('~img/icon/onboarding/options/notes.png'); }
		.icon.projects { background-image: url('~img/icon/onboarding/options/projects.png'); }
		.icon.lifePlanning { background-image: url('~img/icon/onboarding/options/planning.png'); }
		.icon.habitTracking { background-image: url('~img/icon/onboarding/options/tracking.png'); }
		.icon.teamWork { background-image: url('~img/icon/onboarding/options/team.png'); }
		.icon.other { background-image: url('~img/icon/onboarding/options/other.png'); }
	}
}

.pageAuthDeleted {
	.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 { height: 100vh; background: #232323; }
.pageAuthMigrate {
	.icon { transition: none; }
	.frame { width: 640px; background: #191919 !important; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 32px 44px; }

	.frame.init { padding: 67px 64px; }
	.frame.init {
		.iconBg { background: radial-gradient(50% 50% at 50% 50%, rgba(143, 157, 239, 0.10) 0%, rgba(143, 157, 239, 0.00) 100%); }
		.icon { background-image: url('~img/icon/migration/init.png'); }

		.title { @include text-header1; }

		.buttons { display: flex; flex-direction: column; align-items: center; gap: 8px 0px; }
		.buttons {
			.button { width: 256px; }
		}
	}

	.frame.info { padding: 16px 0px 32px; }
	.frame.info {
		.back { display: flex; align-items: flex-start; gap: 0px 6px; margin: 0px 0px 40px 16px; }
		.back {
			.icon { width: 20px; height: 20px; background: url('~img/icon/migration/back.svg'); }
		}

		.items { display: flex; flex-direction: column; align-items: flex-start; gap: 24px 0px; padding: 0px 64px; }
		.items {
			.item { text-align: left; }
			.item {
				.icon { width: 40px; height: 40px; margin-bottom: 8px; }
				.icon.process { background: url('~img/icon/migration/process.svg'); }
				.icon.data { background: url('~img/icon/migration/data.svg'); }

				.text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px 0px; }
				.title, .label { margin-bottom: 0px; }
			}
		}
	}

	.frame.migration { background: none !important; border: 0px; }
	.frame.migration {
		.label { color: var(--color-text-secondary-inversion); }

		.progressBar { padding: 4px 0px 12px; }
		.progressBar {
			.bar { height: 8px; }
			.bar {
				.fill.empty { background: rgba(255, 255, 255, 0.11); }
				.fill:not(.empty) { background: linear-gradient(90deg, #ffee94 0%, #ffd15b 50%, #ffee94 100%); }
			}
		}
	}

	.frame.error {
		.iconBg { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 157, 125, 0.10) 0%, rgba(255, 157, 125, 0.00) 100%); }
		.icon { background-image: url('~img/icon/migration/error.svg'); }
		.label { margin-bottom: 12px; }
	}

	.title { color: #f8f8f8; @include text-header3; margin-bottom: 4px; }
	.label { color: #f8f8f8; margin-bottom: 24px; }

	.iconBg { margin: 0px auto 8px; width: 393px; height: 126px; display: flex; align-items: center; justify-content: center; }
	.iconBg {
		.icon { width: 100px; height: 100px; background-size: 100px; }
	}

	.button:not(.blank),
	.button:not(.blank):hover { background: #d4d4d4 !important; color: #171717 !important; width: unset; }
}
