@import "~scss/_mixins";

@keyframes objectSyncing {
	//100% {transform: rotate(1turn)}
}

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

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

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

		.items { height: 100%; padding: 0px; }
		.items {
			.sides { display: flex; align-items: center; gap: 0px 4px; }
			.sides {
				.side.left { display: flex; align-items: center; flex-grow: 1; width: calc(100% - 24px); }
				.side.right { width: 20px; flex-shrink: 0; display: flex; align-items: center; }
				.side.right {
					.icon { width: 20px; height: 20px; }
					.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; margin: 0px; }
					.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); opacity: 0; position: static; margin: 0px; }
					.icon.more:hover { background-color: unset !important; background-image: url('~img/icon/menu/action/more1.svg'); }
				}
			}

			.sectionName { padding: 4px 16px; }

			.item { padding: 3px 8px; margin: 0px 8px; width: unset; line-height: 22px; border-radius: 6px; }
			.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); }
				}
			}

			.item:hover, .item.hover {
				&::before { background: var(--color-shape-highlight-medium); }
				.side.right {
					.icon:not(.more) { display: none; }
					.icon.more { opacity: 1; }
				}
			}
		}
	}

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

}
