@import "~scss/_mixins";

.popups {
    /* Common */

    .popup {
        .innerWrap { box-shadow: 0px 0px 0px 1px var(--color-shape-primary); }
		#loader { background: rgba(23, 23, 23, 0.5); }
    }
    
    /* PopupHelp */

    .popup.popupHelp {
		.head {
			.icon.mail { background-image: url('#{$themePath}/icon/social/mail0.svg'); }
			.icon.mail:hover { background-image: url('#{$themePath}/icon/social/mail1.svg'); }
		}

		.highlight { color: var(--color-system-accent-100); background: var(--color-shape-highlight-medium); }
		a:hover { color: var(--color-system-accent-100); }
	}

	/* PopupMigration */

	.popup.popupMigration {
		.qrWrap { background-color: var(--color-bg-secondary); }
	}

	/* PopupUsecase */

	.popup.popupUsecase {
		.page.pageList {
			.categories { background: var(--color-shape-tertiary); }
			.categories {
				.item { border-color: var(--color-shape-primary); }
				.item.hl { color: var(--color-text-inversion); }
				.item:hover, .item.active { background: var(--color-control-accent); color: var(--color-text-inversion); }
				.item:hover, .item.active {
					.icon.heart { background-image: url('#{$themePath}/icon/popup/usecase/heart1.svg'); }
					.icon.any { background-image: url('#{$themePath}/icon/popup/usecase/any1.svg'); }
				}

				.item {
					.icon.heart { background-image: url('#{$themePath}/icon/popup/usecase/heart0.svg'); }
					.icon.any { background-image: url('#{$themePath}/icon/popup/usecase/any0.svg'); }
				}

				.icon.arrow { background-image: url('#{$themePath}/arrow/usecaseCategory0.svg'); }
				.icon.arrow:hover { background-color: var(--color-control-accent); background-image: url('#{$themePath}/arrow/usecaseCategory1.svg'); }
			}
		}

		.page.pageItem {
			.screenWrap {
				.icon.arrow { background-color: var(--color-bg-secondary); background-image: url('#{$themePath}/arrow/usecase.svg'); }
			}
		}
	}

	/* PopupConfirm */

	.popup.popupConfirm {
		.iconWrapper { background: none; }
		.icon.update { background-image: url('#{$themePath}/icon/popup/confirm/update.svg'); }
		.icon.updated { background-image: url('#{$themePath}/icon/popup/confirm/updated.svg'); }
		.icon.error { background-image: url('#{$themePath}/icon/popup/confirm/error.svg'); }
		.icon.confirm { background-image: url('#{$themePath}/icon/popup/confirm/confirm.svg'); }
	}

	/* PopupAbout */

	.popup.popupAbout {
		.iconWrapper { background: none; }
	}

	/* PopupInviteRequest */

	.popup.popupInviteRequest {
		.iconWrapper { background: none; }
		.icon { background-image: url('#{$themePath}/icon/popup/confirm/invite.svg'); }
	}

	/* PopupMembership */

	.popup.popupMembership {
		.sides {
			.side.left { background: var(--color-shape-tertiary) !important; }
			.side.left {
				.contentList {
					li::before { background-image: url('#{$themePath}/icon/payment/tick.svg'); }
				}
			}
		}
	}

	/* PopupShare */

	.popup.popupShare {
		.content::before { display: none; }
		.content::after { background-image: url('#{$themePath}/icon/popup/share/header.svg'); }
	}
}
