@import "~scss/_mixins";

.menus {
	.menu.menuSyncStatus { width: var(--menu-width-large); }
	.menu.menuSyncStatus {
		.content { 
			padding: 16px 0px 0px 0px; height: 100%; max-height: unset; display: flex; flex-direction: column; gap: 4px 0px;
		}
		.syncPanel { height: 28px; padding: 0px 16px; display: flex; justify-content: space-between; align-items: center; }

		.title { @include text-paragraph; font-weight: 600; padding: 0; color: var(--color-text-primary); }
		.ReactVirtualized__List { padding: 8px 0px; }

		.icons { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; }
		.icons {
			.iconWrapper { display: flex; position: relative; align-items: center; justify-content: center; width: 28px; height: 28px; }

			.iconWrapper {
				.iconBg { width: 100%; height: 100%; position: absolute; z-index: 0; border-radius: 50%; background: var(--color-shape-tertiary); }
				.icon { width: 20px; height: 20px; }
				.icon.network { background: url('~img/icon/menu/syncStatus/network/grey.svg'); }
				.icon.self { background: url('~img/icon/menu/syncStatus/self/grey.svg'); }
				.icon.p2p { background: url('~img/icon/menu/syncStatus/p2p/grey.svg'); }
				.icon.localOnly { background: url('~img/icon/menu/syncStatus/localOnly.svg'); }
			}
			.iconWrapper.connected {
				.iconBg { background: #c5efa3; }
				.icon.network { background: url('~img/icon/menu/syncStatus/network/green.svg'); }
				.icon.self { background: url('~img/icon/menu/syncStatus/self/green.svg'); }
				.icon.p2p { background: url('~img/icon/menu/syncStatus/p2p/green.svg'); }
			}
			.iconWrapper.connectedSlow {
				.iconBg { background: #f4eb91; }
				.icon.network { background: url('~img/icon/menu/syncStatus/network/yellow.svg'); }
			}
			.iconWrapper.error {
				.iconBg { background: #fcd1c3; }
				.icon.network { background: url('~img/icon/menu/syncStatus/network/red.svg'); }
				.icon.self { background: url('~img/icon/menu/syncStatus/self/red.svg'); }
				.icon.p2p { background: url('~img/icon/menu/syncStatus/p2p/red.svg'); }
			}

			.iconWrapper:hover {
				.iconBg { opacity: 0.5; }
			}
		}

		.upsellBanner { margin: 14px 16px 0px 16px; }

		.incentiveBanner { margin: 10px 16px 0px 16px; padding: 12px 16px 16px 16px; border-radius: 8px; background: linear-gradient(180deg, #FEE7E0 30%, #FFF6F3 100%); }
		.incentiveBanner {
			.buttons { padding-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
			.button { @include text-small; }
			.button.dark { background: var(--color-shape-highlight-medium); color: var(--color-text-primary); }
			.button.dark:hover { background: var(--color-shape-highlight-dark); }
		}

		.items { height: 100%; }
		.items {
			.sides { display: flex; align-items: center; gap: 0px 6px; }
			.sides {
				.side.left { display: flex; align-items: center; flex-grow: 1; overflow: hidden; @include text-overflow-nw; }
				.side.right { width: 20px; flex-shrink: 0; display: flex; align-items: center; flex-shrink: 0; }
				.side.right {
					.icon { width: 20px; height: 20px; margin: 0px; }
					.icon.queued { background-image: url('~img/icon/menu/syncStatus/queued.svg'); }
					.icon.syncing { background-image: url('~img/icon/menu/syncStatus/loading.svg'); transform: translateZ(0); animation: rotate 0.8s infinite steps(8); }
					.icon.synced { background-image: url('~img/icon/menu/syncStatus/ok.svg'); }
					.icon.error { background-image: url('~img/icon/menu/syncStatus/failed.svg'); display: block; }
					.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); display: none; position: static; width: 20px !important; height: 20px !important; }
					.icon.more:hover { background-color: unset !important; background-image: url('~img/icon/menu/action/more1.svg'); }
				}
			}

			.item {
				.info { display: flex; align-items: baseline; width: calc(100% - 24px); }
				.info {
					.iconObject { margin-right: 8px; }
					.name { margin: 0px 6px 0px 0px; @include text-overflow-nw; }
					.size { color: var(--color-text-secondary); }
				}

				&.hover {
					&::before { background: var(--color-shape-highlight-medium); }

					.side.right {
						.icon:not(.more) { display: none; }
						.icon.more { display: block; }
					}
				}
			}
		}
	}

	.menu.menuSyncStatusInfo {
		.content { padding: 8px 0px; }

		.title,
		.label { padding: 0px 16px; }
		.title { color: var(--color-text-primary); font-weight: 500; }
		.label { @include text-small; color: var(--color-text-secondary); }

		.items {
			.item { padding: 4px 16px; }
		}
		.items:before { content: ''; display: block; height: 1px; margin: 8px 16px 6px; background-color: var(--color-shape-secondary); }
	}

}
