@import "~scss/_mixins";

.blocks {

	.block.blockTable { padding: 6px 0px; }
	.block.blockTable {
		.scrollWrap { width: 100%; padding: 5px; line-height: 0px; }
		.scrollWrap.withScroll { overflow-x: auto; padding-bottom: 8px; }

		.scrollWrap > .inner { display: inline-block; position: relative; }

		#selectionFrameContainer { position: absolute; left: 0px; top: 0px; pointer-events: none; z-index: 10; }
		#selectionFrameContainer {
			.selectionFrame { border: 2px solid var(--color-system-accent-50); position: absolute; border-radius: 4px; }
			.selectionFrame.left { border-width: 0px; border-left-width: 2px; border-radius: 0px; }
			.selectionFrame.right { border-width: 0px; border-right-width: 2px; border-radius: 0px; }
			.selectionFrame.top { border-width: 0px; border-top-width: 2px; border-radius: 0px; }
			.selectionFrame.bottom { border-width: 0px; border-bottom-width: 2px; border-radius: 0px; }
		}

		.handle { z-index: 11;  position: absolute; opacity: 0; pointer-events: none; transition: none; padding: 6px; transform: translateX(-50%) translateY(-50%); }
		.handle.canDrag { cursor: grab; }

		.handle {
			.inner { height: 22px; width: 2px; padding: 2px 0px; position: relative; }
			.inner::after {
				content: ""; display: block; background-color: var(--color-system-accent-100); width: 100%; height: 100%; background-position: center;
				background-repeat: no-repeat; border-radius: 3px; position: relative; z-index: 1;
			}
			.inner::before {
				content: ""; height: 100%; width: 2px; position: absolute; left: 50%; margin-left: -1px; top: 0px; background: var(--color-bg-primary); z-index: 0;
			}
		}
		.handle:hover, .handle.isActive {
			.inner { width: 10px; }
			.inner::after { background-image: url('~img/icon/table/handle/common.svg'); background-size: 8px 16px; }
		}

		.handle.handleRow { top: 50%; left: -1px; }

		.handle.handleColumn { top: -1px; left: 50%; }
		.handle.handleColumn {
			.inner { transform: rotateZ(90deg); }
		}

		.plusButton { z-index: 10; }
		.plusButton { 
			.icon { 
				background-color: var(--color-shape-secondary); background-image: url('~img/icon/table/plus.svg'); background-size: 10px; opacity: 0; 
				transition: $transitionAllCommon; width: 100%; height: 100%; border-radius: 4px;
			}
		}
		.plusButton.vertical { position: absolute; width: 18px; height: calc(100% - 18px); right: -18px; top: 0px; padding-left: 4px; }
		.plusButton.horizontal { height: 18px; width: 100%; left: 0px; bottom: -18px; padding-top: 4px; }
		.plusButton.circle { position: absolute; height: 18px; width: 18px; right: -18px; bottom: 0px; padding-top: 4px; padding-left: 4px; opacity: 1; }
		.plusButton.circle {
			.icon { border-radius: 50%; background-color: var(--color-shape-secondary); }
		}
		
		.plusButton:hover, .plusButton.active {
			.icon { opacity: 1; }
		}

		.table { display: block; border-collapse: collapse; position: relative; border-radius: 4px; }

		.table.isClone { border-radius: 4px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border: 2px solid var(--color-system-accent-50); }
		.table.isClone {
			.handleColumn { display: block; border-color: var(--color-system-accent-100); }
		}
		
		.row { display: grid; position: relative; border-right: 1px solid var(--color-shape-primary); background-color: var(--color-shape-primary); }
		.row:first-child { border-radius: 4px 4px 0px 0px; }
		.row:last-child { border-bottom: 1px solid var(--color-shape-primary); border-radius: 0px 0px 4px 4px; }

		.row:first-child .cell:first-child { border-radius: 4px 0px 0px 0px; }
		.row:first-child .cell:first-child {
			.wrapContent { border-radius: 4px 0px 0px 0px; }
		}
		.row:first-child .cell:last-child { border-radius: 0px 4px 0px 0px; }
		.row:first-child .cell:last-child {
			.wrapContent { border-radius: 0px 4px 0px 0px; }
		}

		.row:last-child .cell:last-child { border-radius: 0px 0px 4px 0px; }
		.row:last-child .cell:last-child { 
			.wrapContent { border-radius: 0px 0px 4px 0px; }
		}

		.row:last-child .cell:first-child { border-radius: 0px 0px 0px 4px; }
		.row:last-child .cell:first-child { 
			.wrapContent { border-radius: 0px 0px 0px 4px; }
		}

		.row.isHighlightedRow {
			.handleRow { opacity: 1; pointer-events: all; }
		}

		.row.isHeader {
			.cell, .icon.menu { background-color: var(--color-shape-tertiary); }
			.block { font-weight: 500; }
		}

		.cell { 
			@include text-common; vertical-align: top; position: relative; cursor: text; flex-shrink: 0; background: var(--color-bg-primary);
			color: var(--color-shape-primary); border-left: 1px solid var(--color-shape-primary); border-top: 1px solid var(--color-shape-primary);
		}

		.cell.isHighlightedColumn.isFirst { border-radius: 4px 4px 0px 0px; }
		.cell.isHighlightedColumn.isLast { border-radius: 0px 0px 4px 4px; }
		.cell.isHighlightedColumn {
			.handleColumn { opacity: 1; pointer-events: all; }
		}

		.cell.isEditing {
			.handleRow, .handleColumn { opacity: 1; pointer-events: all; }
		}

		.cell.isHighlightedCell, .cell:hover {
			.icon.menu { opacity: 1; pointer-events: all; }
		}

		.cell.isHighlightedCell {
			.icon.menu { 
				.inner { border-color: var(--color-system-accent-50); box-shadow: 0px 0px 0px 2px var(--color-system-accent-50); }
			}
		}

		.cell:hover {
			.handleRow, .handleColumn { opacity: 1; pointer-events: all; }
		}

		.cell.align-v0 { 
			.block #value { vertical-align: top; }
		}
		.cell.align-v1 { 
			.block #value { vertical-align: middle; }
		}
		.cell.align-v2 { 
			.block #value { vertical-align: bottom; }
		}

		.cell {
			.resize { width: 6px; height: 100%; position: absolute; right: -3px; top: 0px; cursor: col-resize; z-index: 3; }
			.click { width: 100%; height: 100%; }

			.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: var(--color-text-primary); }
			.block {
				.selectionTarget { flex-grow: 1; }
				.wrapContent, .wrap, .flex, .dropTarget { height: 100%; }

				.wrapMenu { display: none; }
				.wrapContent { width: 100%; display: flex; flex-direction: column;  }
				.dropTarget { padding: 0px !important; }
				.dropTarget.targetBot { display: none; }

				.markers { padding: 9px 0px 9px 9px; }
				.wrap { display: table; }

				.focusable.isFocused { background: none; }
			}

			.icon.menu { 
				width: 20px; height: 100%; position: absolute; right: 0px; top: 0px; z-index: 2; cursor: default; opacity: 0; pointer-events: none; 
				background-color: var(--color-bg-primary); 
			}
			.icon.menu {
				.inner { 
					width: 8px; height: 20px; border-radius: 4px; background-image: url('~img/icon/table/handle/cell.svg'); background-size: 8px 16px;
					position: absolute; left: 50%; top: 50%; margin: -10px 0px 0px -4px; background-repeat: no-repeat; background-position: center center; 
					transition: $transitionAllCommon; background-color: var(--color-bg-primary); 
				} 
			}
			.icon.menu:hover {
				.inner { box-shadow: 0px 0px 0px 1px var(--color-shape-primary); background-color: var(--color-bg-primary); }
			}

			.block.blockText { @include text-common; }
			.block.blockText {
				> .wrapContent {
					> .selectionTarget {
						> .dropTarget {
							> .flex {
								> .editableWrap { display: table; }
								> .editableWrap {
									#value { display: table-cell; height: 100%; }
									.placeholder { display: none !important; }
									#value, .placeholder { padding: 9px 9px 9px 0px; }
								}
							}
						}
					}
				}
			}
		}
	}

	.block.blockTable > .wrapContent > .dropTarget.targetBot { display: block; height: 2px; }
	
	.block.blockTable.isReadonly {
		#selectionFrameContainer { display: none; }

		.handle { display: none !important; }
		.cell {
			.block { min-height: 40px; }
			.icon.menu { display: none; }
		}
	}
}

html.platformWindows {
	.blocks {
		.block.blockTable {
			.scrollWrap.withScroll { overflow-x: overlay; }
		}
	}
}