@import "~scss/_mixins";

.blocks {
	.block.blockDataview {
		.viewContent.viewList { padding: 14px 0px 80px 14px; }
		.viewContent.viewList {
			.ReactVirtualized__Grid__innerScrollContainer { overflow-x: auto !important; overflow-y: hidden !important; }

		    .row { height: 100%; width: 100%; display: block; white-space: nowrap; position: relative; }
			.row.isDone * { color: var(--color-text-secondary); }
			.row.isEditing {
				.cellContent:not(.isName) { display: none; }
			}

			.dropTarget { height: 100%; padding: 0px 0px 10px 0px; }

			.cellContent { 
				display: inline-block; vertical-align: top; @include text-small; line-height: 24px; height: 24px;
				cursor: default !important; color: var(--color-text-secondary);
			}
			.cellContent:last-child { margin: 0px; }
			.cellContent:empty::before, .cellContent.isEmpty::before { display: none; }

			.cellContent::before { 
				content: ""; width: 2px; height: 2px; border-radius: 50%; background: var(--color-text-secondary); display: inline-block; 
				vertical-align: middle; margin: 0px 6px; 
			}
			.cellContent.first::before { display: none; }

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

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

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

			.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: 100px; 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; }

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

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

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

	.block.blockDataview.isInline {
		.viewContent.viewList { padding: 9px 0px 0px 0px; }
		.viewContent.viewList {
			.row { padding-left: 0px !important; height: 34px !important; }
		}
	}
}