@import "~scss/_mixins";

.blocks {
	.block.blockDataview {
		.dataviewControls.viewList::after { left: 16px; width: calc(100% - 16px); }

		.viewContent.viewList { padding: 8px 0px 80px 10px; }
		.viewContent.viewList {
			.ReactVirtualized__Grid__innerScrollContainer { overflow-x: hidden !important; overflow-y: hidden !important; }

		    .row { height: 100%; width: 100%; padding-top: 2px; display: block; white-space: nowrap; position: relative; }
			.row.isDone * { color: var(--color-text-secondary); }

			.row:not(.editModeOn) {
				.cellWrapper.isEmpty { margin: 0px !important; display: none; }
				.cellWrapper.isEmpty {
					.cellContent:not(.withMenu) { display: none; }
				}
			}

			.sides { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px 12px; }
			.sides {
				.side { display: flex; flex-direction: row; align-items: center; }
				.side.left { flex: 1 1 auto; min-width: 40%; }
				.side.left {
					.cellWrapper { margin-right: 4px; }
					.cellWrapper.isName { width: 100%; }
				}
				.side.left.s50 { width: 50%; overflow: hidden; }
				.side.left.s50 {
					.cellWrapper.isName { min-width: unset; flex-grow: 0; @include text-overflow-nw; }
				}

				> .cellWrapper { flex-grow: 0; }
			}

			.row:hover,
			.row.hover{
				> .selectionTarget,
				> .dropTarget,
				.cell.add { background-color: var(--color-shape-highlight-medium); border-radius: 6px; }

				.cellWrapper.isName {
					.cellContent:not(.isEditing) { max-width: calc(100% - 26px); }
				}
				.sides {
					.side.left.s50 {
						.cellWrapper.isName {
							.cellContent:not(.isEditing) { max-width: calc(100% - 46px); }
						}
					}
				}

				.cellWrapper.isName {
					.icon.editMode { opacity: 1; }
				}
			}

			.row.add { height: 28px; padding-top: 0px; margin-top: 2px; }
			.row.add {
				.cell.add { padding: 0px; height: 28px; }
				.btn { height: 100%; width: 100%; padding-top: 4px; padding-left: 4px; }
			}

			.selectionTarget,
			.dropTarget { height: 28px; padding: 2px 0px 2px 4px; }

			.cellWrapper,
			.cellContent { 
				display: inline-block; vertical-align: top; @include text-small; line-height: 24px; height: 24px;
				cursor: default !important; color: var(--color-text-secondary);
			}


			.cellWrapper.isName { display: flex; gap: 0px 6px; align-items: center; }
			.cellWrapper.isName {
				.cellContent { max-width: calc(100% - 16px); flex-shrink: 1; }
				.cellContent.isEditing { width: 100%; max-width: unset; flex-grow: 1; }
				.cellContent {
					.name { width: unset; max-width: 100%; }
				}
				.icon.editMode { flex-shrink: 0; width: 20px; height: 20px; display: inline-block; opacity: 0; }
			}

			.cellWrapper:not(.isName) {
				.cellContent { padding-left: 4px; padding-right: 4px; border-radius: 6px; }
				.cellContent.hover,
				.cellContent:hover { background-color: var(--color-shape-highlight-medium); }
			}

			.cellContent:first-child { margin: 0px; }

			.cellContent {
				.name { @include text-overflow-nw; max-width: 300px; }
			}

            .cellContent.isName { @include text-common; display: inline-flex; flex-direction: row; align-items: center; color: var(--color-text-primary); gap: 0px 6px; }
			.cellContent.isName {
				.name { display: inline-block; line-height: 24px; vertical-align: top; font-weight: 500; max-width: 500px; }
				.input.name { padding: 0; @include text-common; width: 100% !important; }
			}

			.cellContent.c-select, 
			.cellContent.c-object { line-height: 24px; }

			.cellContent.c-select, 
			.cellContent.c-object, 
			.cellContent.c-file {
				.wrap { display: inline-block; line-height: 24px; vertical-align: top; }
				.over { display: inline-block; line-height: 24px; vertical-align: top; overflow: visible; }
				.tagItem, .element { margin: 0px 6px 0px 0px; max-width: 300px; vertical-align: top; @include text-small; }
				.more { margin-top: 3px; vertical-align: top; }
				.element { margin-top: 2px; }
				.tagItem { margin-top: 3px; }
				.tagItem:last-child, .element:last-child { margin-right: 0px; }
			}

			.cellContent.c-file {
				.iconObject { margin: 0px; }
				.name { display: none; }
			}

			.cellContent.c-url, 
			.cellContent.c-email, 
			.cellContent.c-phone { color: var(--color-text-secondary); cursor: default !important; }

			.cellContent.c-url, 
			.cellContent.c-email, 
			.cellContent.c-phone {
				.name { border: 0px; }
			}

			.cellContent.c-url:hover, 
			.cellContent.c-email:hover, 
			.cellContent.c-phone:hover {
				.name { text-decoration: underline; }
			}

			.cellContent.c-checkbox { display: inline-flex; }
			.cellContent.c-checkbox {
				.icon.checkbox { width: 20px; height: 20px; }
			}
			.cellContent.c-checkbox.canEdit { cursor: default !important; }

			.cellContent.isEmpty:not(.editModeOn, .withMenu) { display: none; }

			.loadMore { margin-top: 2px; }
        }

		.viewContent.viewList.isCollection { padding-left: 0px; }
		.viewContent.viewList.isCollection {
			.row { padding-left: 12px; }
			.row {
				.icon.drag { top: 10px; left: 0px; margin: 0px; }
			}
			.row:hover {
				.icon.drag { opacity: 1; }
			}

			.dropTarget.isOver { box-shadow: 0px 0px; }
			.dropTarget.isOver::before { 
				content: ""; position: absolute; background: var(--color-control-accent); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 14px; 
			}
			.dropTarget.isOver.top::before { top: -6px; }
			.dropTarget.isOver.bottom::before { bottom: 4px; }

			.dropTarget {
				.selectionTarget { padding: 0px; border-radius: 0px; }
			}
		}
    }

	.block.blockDataview.isInline {
		.viewContent.viewList { padding: 9px 0px 0px 0px; }
		.viewContent.viewList {
			.row { padding: 2px 0px 0px 4px; height: 28px !important; margin: 2px 0px; }
			.row:hover { background-color: var(--color-shape-highlight-medium); border-radius: 6px; }

			.row.add { padding-top: 0px; }
			.row.add {
				.btn { padding: 4px 0px 0px 0px; }
			}
			.row.add:hover {
				.cell.add { background-color: transparent; }
			}
		}
	}
}
