@import "~scss/_mixins";

.popups {
	.popup.popupShortcut * { user-select: text !important; user-select: none; }
	.popup.popupShortcut {
		.innerWrap { 
			width: 336px; height: 100%; overflow: visible; left: auto; top: 0px; right: 0px; border-radius: 0px; 
			opacity: 1; transform: translate3d(100%,0px,0px); transition-duration: 0.2s; transition-timing-function: ease-in;
		}
		.content { display: flex; flex-direction: column; height: 100%; }

		.head { display: flex; flex-direction: column; gap: 16px 0px; flex-shrink: 0; padding: 16px 16px 12px 16px; }
		.head {
			.sides { display: flex; flex-direction: row; align-items: flex-start; gap: 0px 16px; }
			.side.left { flex-grow: 1; }
			.side.right { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; }

			.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
			.icon.close { background-image: url('~img/icon/close.svg'); }

			.filter { padding: 0px; }
			.filter {
				.inner { height: 28px; }
			}

			.select { border: 0px; padding-left: 0px; cursor: default; @include text-paragraph; font-weight: 600; margin: 0px 0px 4px 0px; }
			.select:hover, .select.hover { background: none; }

			.label { @include text-small; font-weight: 500; }
		}

		.body { padding: 0px 0px 16px 0px; flex-grow: 1; overflow: auto; }
		.body {
			.section {
				> .name { padding: 9px 16px; @include text-small; color: var(--color-text-secondary); font-weight: 500; }

				.item { padding: 6px 16px; gap: 0px 8px; cursor: default; min-height: 36px; 	}
				.item.canEdit:not(.isEditing) {
					&:hover, &.hover {
						.symbols {
							.label { background-color: var(--color-bg-blue); }
						}

						.label.grey { color: var(--color-blue); }
					}
				}
				.item.hasError { background: var(--color-bg-red); }
				.item.hasError {
					.symbols {
						.label { background-color: var(--color-bg-tag-red); }
					}
				}

				.item {
					.flex { flex-direction: row; align-items: center; line-height: 24px; }
					.alert { width: 20px; height: 20px; margin-right: 6px; background: url('~img/icon/alert.svg'); }
					.name { flex-grow: 1; }
					.error { margin: 0.5em 0px 0px 0px; @include text-small; }

					.label { @include text-small; }
					.label.text { text-align: right; }
					.label.grey { color: var(--color-text-tertiary); }

					.symbols { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }
					.symbols {
						.label { 
							background: var(--color-shape-tertiary); border-radius: 4px; height: 24px; padding: 0px 4px; min-width: 24px;
							display: flex; flex-direction: row; align-items: center; justify-content: center;
						}
					}
				}
			}
		}
	}

	.popup.popupShortcut.show {
		.innerWrap { opacity: 1; transform: translate3d(0px,0px,0px); }
	}
}