@import "~scss/_mixins";

.menus {
	.menu.menuDataviewCreateBookmark { width: var(--menu-width-large); min-height: 44px; padding: 0px; }
	.menu.menuDataviewCreateBookmark {
		.loaderWrapper { position: absolute; background: var(--color-bg-loader); width: 100%; height: 100%; border-radius: 8px; z-index: 10; left: 0px; top: 0px; }

		.content { padding: 0px; }

		.form { display: flex; flex-direction: column; width: 100%; }

		.inputWrap { 
			display: flex; width: 100%; height: 100%; flex-direction: row; align-items: center; gap: 0px 6px; padding: 0px 12px; 
			border-bottom: 1px solid var(--color-shape-secondary); 
		}
		.inputWrap {
			.icon { margin: 0px; flex-shrink: 0; width: 20px; height: 20px; }
			.input { height: 44px; flex-grow: 1; width: 100%; padding: 0px; border: 0px; }
		}

		.previewWrap { 
			display: flex; flex-direction: row; align-items: center; gap: 0px 12px; width: 100%; padding: 8px 16px; 
			border-bottom: 1px solid var(--color-shape-secondary); 
		}
		.previewWrap {
			.pic { 
				width: 48px; height: 48px; background-color: var(--color-shape-tertiary); border-radius: 4px; flex-shrink: 0; 
				background-repeat: no-repeat; background-size: cover; background-position: center;
			}

			.name { @include clamp1; font-weight: 500; }
			.descr { @include clamp1; @include text-small; color: var(--color-text-secondary); }
		}

		.error { padding: 8px 12px; margin: 0px; text-align: center; }

		.bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 12px; }
		.bottom {
			.side.left { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; }
			.label { @include text-small; color: var(--color-text-secondary); }
		}

	}
}