@import "~scss/_mixins";

.popups {
	.popup.popupConfirm {
		.innerWrap { width: 424px; padding: 32px; text-align: center; }
		.wrap.withCheckbox {
			.label { margin-bottom: 12px; }
		}

		.title { @include text-header3; margin-bottom: 6px; }
		.label { margin-bottom: 26px; user-select: text !important; word-wrap: break-word; }
		.buttons { display: flex; flex-direction: row-reverse; gap: 0px 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; height: 104px; border-radius: 320px; margin: -16px auto 10px; align-items: center; justify-content: space-around; }
		.iconWrapper.green { background: radial-gradient(50% 50% at 50% 50%, #a9f496 26.04%, rgba(188, 242, 175, 0.00) 100%); }
		.iconWrapper.red { background: radial-gradient(50% 50% at 50% 50%, #ffbcbc 26.04%, rgba(255, 230, 230, 0.00) 100%); }
		.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: 72px; height: 72px; }
			.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.confirm { width: 96px; background-image: url('~img/icon/popup/confirm/confirm.svg'); }
			.icon.invite { width: 68px; background-image: url('~img/icon/popup/confirm/invite.svg'); }
			.icon.sad { width: 68px; background-image: url('~img/icon/popup/confirm/sad.svg'); }
			.icon.warning { width: 96px; background-image: url('~img/icon/popup/confirm/warning.svg'); }
			.icon.warningInverted { width: 96px; background-image: url('~img/icon/popup/confirm/warningInverted.svg'); }
		}

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

		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 { width: 120px; 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; }
	}
}
