@import "~scss/_mixins";

.blocks {
	.block.blockDataview { @include text-common; padding: 8px 0px 6px 0px; }
	.block.blockDataview {
		.wrapContent { z-index: 1; }

		#set-loader { margin: 24px auto; }
		.icon.plus { width: 20px; height: 20px; background-image: url('~img/icon/plus/menu0.svg'); }
		
		.icon.edit { 
			display: none; flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/icon/dataview/button/edit0.svg'); 
			background-size: 20px;
		}
		.icon.edit:hover { background-image: url('~img/icon/dataview/button/edit1.svg'); }

		.loadMore { 
			display: flex; align-items: center; @include text-small; line-height: 20px; width: 100%; margin-top: 10px; padding: 4px 2px; color: var(--color-text-secondary);
			transition: $transitionAllCommon;
		}
		.loadMore {
			.icon { flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/arrow/loadMore0.svg'); }
			.name { @include text-overflow-nw; width: calc(100% - 20px); }
		}

		.loadMore:hover { color: var(--color-text-primary); }
		.loadMore:hover { 
			.icon { background-image: url('~img/arrow/loadMore1.svg'); }
		}

		.dateSelect { padding: 2px 0px 2px 10px; display: flex; flex-direction: row; margin: 0px 0px 12px 0px; justify-content: space-between; }
		.dateSelect {
			.side.left { @include text-paragraph; font-weight: 600; display: flex; flex-direction: row; gap: 0px 2px; align-items: center; }
			.side.right { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0px 2px; align-items: center; }

			.select { padding: 2px 4px; border: 0px; }
			.select {
				.icon.arrow { display: none; }
			}

			.btn { padding: 2px 4px; line-height: 20px; transition: $transitionAllCommon; border-radius: 4px; }
			.btn:hover { background-color: var(--color-shape-highlight-medium); }

			.icon.arrow { 
				width: 24px; height: 24px; background-size: 20px; background-image: url('~img/arrow/dateSelect.svg'); border-radius: 4px; 
				transition: $transitionAllCommon;
			}
			.icon.arrow.left { transform: rotateZ(180deg); }

			.icon.arrow:hover { background-color: var(--color-shape-highlight-medium); }
		}

		.dataviewEmpty { 
			color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--color-shape-secondary); 
			text-align: center; padding: 16px 0px; height: 300px;
		}
		.dataviewEmpty.withHead { border-top: 0px; }
		.dataviewEmpty {
			.inner { width: 300px; }
			.name { font-weight: 500; margin: 0px 0px 2px 0px; }
			.descr { @include text-small; margin: 0px 0px 8px 0px; }
			.button { color: var(--color-text-primary); }
		}

		.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); }
		.dataviewHead {
			.icon.source { background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; flex-shrink: 0; }
			.icon.source.active { opacity: 1; }

			.editableWrap { @include text-header2; height: 28px; @include text-overflow-nw; }
			.editableWrap.isEmpty { min-width: 120px; }
			.editableWrap {
				.editable { height: 100%; }
			}
		}
		.dataviewHead.isEditing {
			.editableWrap { cursor: text; }
		}
		.dataviewHead.isDeleted {
			.editableWrap { color: var(--color-text-tertiary); }
			#head-source-select { display: none; }
		}
		.dataviewHead.isCollection {
			.editableWrap.isEmpty { min-width: 160px; }
		}

		.dataviewControls { font-weight: 500; color: var(--color-control-active); position: relative; overflow: hidden; }
		.dataviewControls::after { content: ''; display: none; height: 1px; width: 100%; background: var(--color-shape-secondary); position: absolute; bottom: 0px; }
		.dataviewControls.viewGrid::after, .dataviewControls.viewList::after { display: block; }

		.dataviewControls {
			> .sides { gap: 0px 16px; display: flex; flex-direction: row; align-items: center; justify-content: stretch; width: 100%; }
			> .sides {
				> .side { padding: 15px 0px; white-space: nowrap; line-height: 28px; display: flex; flex-direction: row; align-items: center; }
				> .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; }
				> .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; }
				> .side.right {
					.filter { color: var(--color-text-primary); padding: 0px; }
					.filter {
						.inner { gap: 0px; height: 100%; }
						.filterInputWrap { overflow: hidden; width: 0px; transition: width 0.2s $easeInQuint; }
						.line { display: none !important; }
						.icon.search { background-image: url('~img/icon/dataview/button/search.svg'); }
						.icon.clear { display: none; }
					}
					.filter.isActive {
						.icon:hover { background-color: unset; }
						.icon.clear { display: block; }
						.filterInputWrap { width: 120px; }
					}

					.buttonWrap { margin-left: 6px; display: flex; }
					.buttonWrap {
						.button { margin-left: 0; }
					}
					.buttonWrap.withSelect {
						.button.addRecord { border-radius: 6px 0 0 6px; }
						.button.select {
							width: 24px; height: 28px; border: 0 solid; border-left: 1px solid rgba(255, 255, 255, .1); border-radius: 0 6px 6px 0;
						}
						.button.select:after { content: ''; position: absolute; left: 1px; top: 4px; width: 20px; height: 20px; background: url('~img/arrow/button/white.svg') 50% 50% no-repeat; }
					}
				}
			}

			.icon { position: relative; transition: $transitionAllCommon; }
			.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
			.icon.btn-filter.on { background-image: url('~img/icon/dataview/button/filter1.svg'); }
			.icon.btn-sort { background-image: url('~img/icon/dataview/button/sort0.svg'); }
			.icon.btn-sort.on { background-image: url('~img/icon/dataview/button/sort1.svg'); }
			.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }

			.views { display: flex; gap: 0px 16px; flex-direction: row; align-items: center; justify-content: flex-start; }
			.views {
				.icon.plus { opacity: 0; }
			}

			.viewItem { 
				transition: color $transitionCommon; @include text-header3; font-weight: 700; @include text-overflow-nw; 
				max-width: 300px; color: var(--color-control-active);
			}
			.viewItem { 
				.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/view.svg'); }
			}
			.viewItem:last-child { margin: 0px; }
			.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
			.viewItem.isDragging { background: rgba(255,255,255,0.5); padding: 0px 4px; border-radius: 4px; width: auto !important; }

			.viewSelect { display: none; border: 0px; padding-left: 0px; color: var(--color-text-primary); }
			.viewSelect {
				.icon:hover, .icon.active { background-color: transparent !important; }
				.name { @include text-overflow-nw; }
			}

			.button { padding: 0px 8px; @include text-common; }
		}
		.dataviewControls.small {
			.side.left {
				.views { display: none; }
				.viewSelect { display: inline-block; }
			}
		}
		.dataviewControls.isCollection {
			.side.left { padding-left: 20px; }
		}

		.dataviewSelection { font-weight: 400; display: none; }
		.dataviewSelection {
			.side.left { @include text-header3;  }
			.side.right {
				.element {
					display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px;
					transition: $transitionAllCommon; color: var(--color-text-primary);
				}
				.element {
					.icon { width: 20px; height: 20px; }
					.icon.unlink { background-image: url('~img/icon/dataview/selection/unlink.svg'); }
					.icon.archive { background-image: url('~img/icon/menu/action/remove0.svg'); }
					.icon.done { background-image: url('~img/icon/dataview/selection/done.svg'); }
				}
				.element:hover { background-color: var(--color-shape-highlight-medium); }
			}
		}

		.content {
			.scroll { overflow-x: auto; overflow-y: visible; }
		}

		.viewContent {
			.icon.drag { 
				z-index: 1; width: 7px; height: 12px; background-image: url('~img/icon/dataview/dnd.svg'); cursor: grab;
				position: absolute; top: 50%; margin: -6px 0px 0px 0px; left: 4px; opacity: 0; transition: opacity $transitionCommon;
			}
		}

		.hoverArea.active,
		.hoverArea:hover {
			.dataviewControls {
				> .sides {
					> .side.right { opacity: 1; }
				}

				.views {
					.icon.plus { opacity: 1; }
				}
			}
			.dataviewHead {
				> .sides {
					> .side.right { opacity: 1; }
				}

				#head-source-select { opacity: 1; }
			}
		}
	}

	.block.blockDataview.isSelectionSelected {
		.dataviewControls {
			> .sides {
				> .side.right { opacity: 1; }
			}

			.views {
				.icon.plus { opacity: 1; }
			}
		}
		.dataviewHead {
			> .sides {
				> .side.right { opacity: 1; }
			}

			#head-source-select { opacity: 1; }
		}
	}

	.block.blockDataview.isInline {
		.wrapMenu > .icon.dnd { height: 60px; }

		.dataviewEmpty { height: auto; padding: 48px 0px; border-top: 1px solid var(--color-shape-secondary); border-bottom: 1px solid var(--color-shape-secondary); }

		.dataviewControls { margin: 0px 0px 8px 0px; }
		.dataviewControls {
			> .sides { align-items: center; }
			> .sides {
				> .side { padding: 0px; height: 28px; }
				> .side.left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px 0px; }
				> .side.right { transition: opacity $transitionCommon; opacity: 0; }
			}

			.views { gap: 0px 12px; }
			.viewItem { @include text-common; font-weight: 500; }
			.button { margin-left: 6px; }

			.icon.plus { width: 20px; height: 20px; }
			.icon.plus:hover { background-color: transparent; }
		}
		.dataviewControls::after { display: none !important; }

		.dataviewSelection {
			.side.left { @include text-paragraph; }
		}

		.content {
			.scroll { padding-bottom: 2px; }
		}
	}

	.block.blockDataview.isInline.isVertical {
		.dataviewControls {
			.btn-filter, .btn-sort { display: none; }
		}
	}

	.block.blockDataview.showMenu {
		.dataviewHead {
			.icon.source { opacity: 1; }
		}
		.dataviewControls {
			> .sides {
				> .side.right { opacity: 1; }
			}
			.views {
				.icon.plus { opacity: 1; }
			}
		}
	}
	
}

html.platformWindows {
	.blocks {
		.block.blockDataview {
			.content {
				.scroll { overflow: overlay; }
			}
		}
	}
}
