@import "~scss/_mixins";

.popups {

	.popup.popupConfirm * { user-select: text !important; }
	.popup.popupConfirm {
		.innerWrap { width: 424px; padding: 32px; text-align: center; }

		.wrap.withInput {
			.checkboxWrapper { margin-bottom: 12px; }
		}

		.title { @include text-header3; margin-bottom: 6px; }
		.descr { margin-bottom: 24px; user-select: text !important; word-wrap: break-word; }
		.buttons { display: flex; flex-direction: column; gap: 8px; }
		.buttons {
			.button { width: 100%; }
			.button.blank:not(:hover):not(.hover) { background-color: var(--color-bg-primary); }
		}
		.iconObject { margin-bottom: 12px; }

		.iconWrapper { display: flex; width: 320px; border-radius: 320px; margin: 0px auto 10px; align-items: center; justify-content: space-around; }
		.iconWrapper.yellow { background: radial-gradient(50% 50% at 50% 50%, #fff0c8 0%, rgba(255, 240, 200, 0.00) 100%); }
		.iconWrapper.blue { background: radial-gradient(50% 50% at 50% 50%, #80d1ff 0%, rgba(187, 231, 255, 0.00) 100%); }

		.iconWrapper {
			.icon { width: 56px; height: 56px; }
			.icon.update { background-image: url('~img/icon/popup/confirm/update.svg'); }
			.icon.updated { background-image: url('~img/icon/popup/confirm/updated.svg'); }
			.icon.error { display: block; background-image: url('~img/icon/popup/confirm/error.svg'); }
			.icon.noAccess { display: block; background-image: url('~img/icon/popup/confirm/lock.svg'); }
			.icon.confirm { background-image: url('~img/icon/popup/confirm/confirm.svg'); }
			.icon.invite { background-image: url('~img/icon/popup/confirm/invite.svg'); }
			.icon.warning { background-image: url('~img/icon/popup/confirm/warning.svg'); }
			.icon.warning-grey { background-image: url('~img/icon/popup/confirm/warning-grey.svg'); }
			.icon.warning-red { background-image: url('~img/icon/popup/confirm/warning-red.svg'); }
			.icon.join { background-image: url('~img/icon/popup/confirm/join.svg'); }
			.icon.create { background-image: url('~img/icon/popup/confirm/create.svg'); }
			.icon.success { background-image: url('~img/icon/popup/confirm/success.svg'); }
		}

		.checkboxWrapper { 
			display: flex; flex-direction: row; gap: 0px 8px; align-items: center; justify-content: center; margin: 0px 0px 16px 0px; cursor: default;
		}
		.checkboxWrapper {
			.label { margin: 0px !important; }
		}

		.confirmMessage { display: flex; flex-direction: column; gap: 4px 0px; justify-content: flex-start; margin: 0px 0px 16px 0px; text-align: left; }
		.confirmMessage {
			.label { margin: 0px; @include text-small; }
			.input { border: 1px solid var(--color-shape-secondary); border-radius: 6px; }
		}

		ul { padding-left: 1.25em; margin: 0.75em 0px; }
		.error { margin-bottom: 0px; }
	}

	.popup.popupConfirm.isWide {
		.innerWrap { width: 640px; max-height: 640px; }
	}

	.popup.popupConfirm.shareMoreInfo {
		.innerWrap { width: 548px; }
	}

	.popup.popupConfirm.lostPhrase {
		.innerWrap { width: 500px; }
	}

	.popup.popupConfirm.techInfo {
		.title { margin-bottom: 9px; }
		.label {
			dl { display: flex; justify-content: space-between; }
			dt { flex-shrink: 0; text-align: left; }
			dd { text-align: right; color: var(--color-text-secondary); }
		}
	}

	.popup.popupConfirm.spaceInfo {
		.title { margin-bottom: 9px; }
		.label {
			dl { margin-bottom: 16px; }
			dt { text-align: left; }
			dd { text-align: left; color: var(--color-text-secondary); }
		}
	}

	.popup.popupConfirm.isLeft {
		.innerWrap { text-align: left; }
	}

	.popup.popupConfirm.localOnlyWarning {
		.innerWrap { padding: 32px 32px 24px 32px; }
		.buttons { flex-direction: column-reverse; gap: 8px 0px; }
	}

	.popup.popupConfirm.removeFavorite {
		.innerWrap { width: 640px; padding: 0px; }

		.iconWrapper { width: 100%; height: 320px; margin: 0px 0px 20px 0px; }
		.icon { background-image: url('~img/help/pinned.png'); background-size: cover; background-position: top center; }
		.icon { width: 100%; height: 100%; }
		.title { padding: 0px 32px; margin: 0px 0px 4px 0px; }
		.label { padding: 0px 32px; margin: 0px 0px 16px 0px; }
		.buttons { display: flex; flex-direction: row-reverse; gap: 0px 8px; padding: 0px 32px 24px 32px; }
	}
}
