@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/dist/es2019/ui/ui-styles.js

@@ -6,13 +6,13 @@ import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = cssString => css`
-  .${ClassName.CONTROLS_INSERT_LINE} {
-    background: ${tableBorderSelectedColor};
-    display: none;
-    position: absolute;
-    z-index: ${akEditorUnitZIndex};
-    ${cssString}
-  }
+	.${ClassName.CONTROLS_INSERT_LINE} {
+		background: ${tableBorderSelectedColor};
+		display: none;
+		position: absolute;
+		z-index: ${akEditorUnitZIndex};
+		${cssString}
+	}
 `;
 const Marker = () => css({
   backgroundColor: tableBorderColor,
@@ -23,132 +23,132 @@ const Marker = () => css({
   pointerEvents: 'none'
 });
 export const InsertMarker = cssString => css`
-  .${ClassName.CONTROLS_INSERT_MARKER} {
-    ${Marker()};
-    ${cssString}
-  }
+	.${ClassName.CONTROLS_INSERT_MARKER} {
+		${Marker()};
+		${cssString}
+	}
 `;
 const Button = cssString => css`
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  border-width: 0px;
-  display: inline-flex;
-  max-width: 100%;
-  text-align: center;
-  margin: 0px;
-  padding: 0px;
-  text-decoration: none;
-  transition: background 0.1s ease-out 0s,
-    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
-  outline: none !important;
-  cursor: none;
-
-  > .${ClassName.CONTROLS_BUTTON_ICON} {
-    display: inline-flex;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  ${cssString}
+	border-radius: ${"var(--ds-border-radius, 3px)"};
+	border-width: 0px;
+	display: inline-flex;
+	max-width: 100%;
+	text-align: center;
+	margin: 0px;
+	padding: 0px;
+	text-decoration: none;
+	transition:
+		background 0.1s ease-out 0s,
+		box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
+	outline: none !important;
+	cursor: none;
+
+	> .${ClassName.CONTROLS_BUTTON_ICON} {
+		display: inline-flex;
+		max-height: 100%;
+		max-width: 100%;
+	}
+	${cssString}
 `;
 
 // Explicit pixel values required here to ensure classic row controls align correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const HeaderButton = cssString => css`
-  .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableHeaderCellBackgroundColor};
-    border: 1px solid ${tableBorderColor};
-    display: block;
-    box-sizing: border-box;
-    padding: 0;
-
-    :focus {
-      outline: none;
-    }
-    ${cssString}
-  }
-
-  .${ClassName.ROW_CONTROLS_BUTTON}::after {
-    content: ' ';
-    background-color: transparent;
-    left: -15px;
-    top: 0;
-    position: absolute;
-    width: 15px;
-    height: 100%;
-    z-index: 1;
-  }
-
-  .active .${ClassName.CONTROLS_BUTTON} {
-    color: ${`var(--ds-icon-inverse, ${N0})`};
-    background-color: ${tableToolbarSelectedColor};
-    border-color: ${tableBorderSelectedColor};
-  }
+	.${ClassName.CONTROLS_BUTTON} {
+		background: ${tableHeaderCellBackgroundColor};
+		border: 1px solid ${tableBorderColor};
+		display: block;
+		box-sizing: border-box;
+		padding: 0;
+
+		:focus {
+			outline: none;
+		}
+		${cssString}
+	}
+
+	.${ClassName.ROW_CONTROLS_BUTTON}::after {
+		content: ' ';
+		background-color: transparent;
+		left: -15px;
+		top: 0;
+		position: absolute;
+		width: 15px;
+		height: 100%;
+		z-index: 1;
+	}
+
+	.active .${ClassName.CONTROLS_BUTTON} {
+		color: ${`var(--ds-icon-inverse, ${N0})`};
+		background-color: ${tableToolbarSelectedColor};
+		border-color: ${tableBorderSelectedColor};
+	}
 `;
 export const HeaderButtonHover = () => css`
-  .${ClassName.CONTROLS_BUTTON}:hover {
-    color: ${`var(--ds-icon-inverse, ${N0})`};
-    background-color: ${tableToolbarSelectedColor};
-    border-color: ${tableBorderSelectedColor};
-    cursor: pointer;
-  }
+	.${ClassName.CONTROLS_BUTTON}:hover {
+		color: ${`var(--ds-icon-inverse, ${N0})`};
+		background-color: ${tableToolbarSelectedColor};
+		border-color: ${tableBorderSelectedColor};
+		cursor: pointer;
+	}
 `;
 export const HeaderButtonDanger = () => css`
-  .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${tableToolbarDeleteColor};
-    border-color: ${tableBorderDeleteColor};
-    position: relative;
-    z-index: ${akEditorUnitZIndex};
-  }
+	.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
+		background-color: ${tableToolbarDeleteColor};
+		border-color: ${tableBorderDeleteColor};
+		position: relative;
+		z-index: ${akEditorUnitZIndex};
+	}
 `;
 const InsertButton = () => css`
-  .${ClassName.CONTROLS_INSERT_BUTTON_INNER} {
-    position: absolute;
-    z-index: ${akEditorUnitZIndex + 10};
-    bottom: 0;
-  }
-  .${ClassName.CONTROLS_INSERT_BUTTON_INNER},
-    .${ClassName.CONTROLS_INSERT_BUTTON} {
-    height: ${tableInsertColumnButtonSize}px;
-    width: ${tableInsertColumnButtonSize}px;
-  }
-  .${ClassName.CONTROLS_INSERT_BUTTON} {
-    ${Button(`
+	.${ClassName.CONTROLS_INSERT_BUTTON_INNER} {
+		position: absolute;
+		z-index: ${akEditorUnitZIndex + 10};
+		bottom: 0;
+	}
+	.${ClassName.CONTROLS_INSERT_BUTTON_INNER}, .${ClassName.CONTROLS_INSERT_BUTTON} {
+		height: ${tableInsertColumnButtonSize}px;
+		width: ${tableInsertColumnButtonSize}px;
+	}
+	.${ClassName.CONTROLS_INSERT_BUTTON} {
+		${Button(`
       background: ${"var(--ds-surface-overlay, white)"};
       box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
       color: ${`var(--ds-icon, ${N300})`};
     `)}
-  }
-  .${ClassName.CONTROLS_INSERT_LINE} {
-    display: none;
-  }
-  &:hover .${ClassName.CONTROLS_INSERT_LINE} {
-    display: flex;
-  }
+	}
+	.${ClassName.CONTROLS_INSERT_LINE} {
+		display: none;
+	}
+	&:hover .${ClassName.CONTROLS_INSERT_LINE} {
+		display: flex;
+	}
 `;
 const InsertButtonHover = () => css`
-  .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
-    background: ${`var(--ds-background-brand-bold, ${B300})`};
-    color: ${"var(--ds-icon-inverse, white)"};
-    cursor: pointer;
-  }
+	.${ClassName.CONTROLS_INSERT_BUTTON}:hover {
+		background: ${`var(--ds-background-brand-bold, ${B300})`};
+		color: ${"var(--ds-icon-inverse, white)"};
+		cursor: pointer;
+	}
 `;
 export const dragInsertButtonWrapper = () => css`
-  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
-    position: absolute;
-    z-index: ${akEditorUnitZIndex + 10};
-  }
-
-  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN} {
-    bottom: -3px;
-    left: 2px;
-  }
-
-  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW} {
-    left: -3px;
-    bottom: -2px;
-  }
-
-  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
-    ${Button(`
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+		position: absolute;
+		z-index: ${akEditorUnitZIndex + 10};
+	}
+
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN} {
+		bottom: -3px;
+		left: 2px;
+	}
+
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW} {
+		left: -3px;
+		bottom: -2px;
+	}
+
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
+		${Button(`
     background: ${"var(--ds-surface-overlay, white)"};
     color: ${`var(--ds-icon, ${N300})`};
     border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
@@ -156,66 +156,66 @@ export const dragInsertButtonWrapper = () => css`
     height: ${dragTableInsertColumnButtonSize}px;
     width: ${dragTableInsertColumnButtonSize}px;
   `)}
-  }
-
-  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
-    background: ${`var(--ds-background-brand-bold, ${B300})`};
-    border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
-    color: ${"var(--ds-icon-inverse, white)"};
-    cursor: pointer;
-  }
+	}
+
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
+		background: ${`var(--ds-background-brand-bold, ${B300})`};
+		border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
+		color: ${"var(--ds-icon-inverse, white)"};
+		cursor: pointer;
+	}
 `;
 
 // Explicit pixel values required here to ensure corner button aligns correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const dragCornerControlButton = () => css`
-  .${ClassName.DRAG_CORNER_BUTTON} {
-    width: 15px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: -17px;
-    left: -5px;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    outline: none;
-    z-index: ${akEditorUnitZIndex * 99};
-
-    &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-      background-color: ${"var(--ds-border-selected, #0C66E4)"};
-      width: 10px;
-      height: 10px;
-      border-width: 2px;
-      border-radius: 4px;
-
-      top: 3px;
-      left: 2px;
-    }
-
-    &:hover {
-      cursor: pointer;
-
-      .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-        width: 10px;
-        height: 10px;
-        border-radius: 4px;
-        top: 3px;
-        left: 2px;
-      }
-    }
-  }
-
-  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-    border: 1px solid ${"var(--ds-border-inverse, #FFF)"};
-    background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
-    border-radius: 2px;
-    width: 5px;
-    height: 5px;
-    position: relative;
-  }
+	.${ClassName.DRAG_CORNER_BUTTON} {
+		width: 15px;
+		height: 15px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: -17px;
+		left: -5px;
+		background-color: transparent;
+		border: none;
+		padding: 0;
+		outline: none;
+		z-index: ${akEditorUnitZIndex * 99};
+
+		&.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+			background-color: ${"var(--ds-border-selected, #0C66E4)"};
+			width: 10px;
+			height: 10px;
+			border-width: 2px;
+			border-radius: 4px;
+
+			top: 3px;
+			left: 2px;
+		}
+
+		&:hover {
+			cursor: pointer;
+
+			.${ClassName.DRAG_CORNER_BUTTON_INNER} {
+				width: 10px;
+				height: 10px;
+				border-radius: 4px;
+				top: 3px;
+				left: 2px;
+			}
+		}
+	}
+
+	.${ClassName.DRAG_CORNER_BUTTON_INNER} {
+		border: 1px solid ${"var(--ds-border-inverse, #FFF)"};
+		background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+		border-radius: 2px;
+		width: 5px;
+		height: 5px;
+		position: relative;
+	}
 `;
 export const insertColumnButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
     width: 2px;
@@ -227,92 +227,85 @@ export const insertRowButtonWrapper = () => css(InsertButton(), InsertButtonHove
     left: ${tableInsertColumnButtonSize - 1}px;
   `));
 export const columnControlsLineMarker = () => css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
-    table
-    tr:first-of-type
-    td,
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
-    table
-    tr:first-of-type
-    th {
-    position: relative;
-  }
+	.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-of-type td,
+	.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-of-type th {
+		position: relative;
+	}
 `;
 export const DeleteButton = () => css`
-  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
-    .${ClassName.CONTROLS_DELETE_BUTTON} {
-    height: ${tableDeleteButtonSize}px;
-    width: ${tableDeleteButtonSize}px;
-  }
-  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
-    .${ClassName.CONTROLS_DELETE_BUTTON} {
-      ${Button(`
+	.${ClassName.CONTROLS_DELETE_BUTTON_WRAP}, .${ClassName.CONTROLS_DELETE_BUTTON} {
+		height: ${tableDeleteButtonSize}px;
+		width: ${tableDeleteButtonSize}px;
+	}
+	.${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
+		.${ClassName.CONTROLS_DELETE_BUTTON} {
+			${Button(`
         background: ${tableCellSelectedDeleteIconBackground};
         color: ${tableCellSelectedDeleteIconColor};
       `)}
-    }
-  }
-
-  .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${tableCellHoverDeleteIconBackground};
-    color: ${tableCellHoverDeleteIconColor};
-    cursor: pointer;
-  }
+		}
+	}
+
+	.${ClassName.CONTROLS_DELETE_BUTTON}:hover {
+		background: ${tableCellHoverDeleteIconBackground};
+		color: ${tableCellHoverDeleteIconColor};
+		cursor: pointer;
+	}
 `;
 export const OverflowShadow = isDragAndDropEnabled => css`
-  .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-    display: block;
-    height: calc(100% - ${tableMarginTop}px);
-    position: absolute;
-    pointer-events: none;
-    top: ${tableMarginTop}px;
-    z-index: ${akEditorShadowZIndex};
-    width: ${tableOverflowShadowWidthWide}px;
-  }
-  .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(
-        to left,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
-      ),
-      linear-gradient(
-        to right,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    left: 0px;
-  }
-  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
-    left: ${akEditorTableNumberColumnWidth - 1}px;
-  }
-  .${ClassName.TABLE_RIGHT_SHADOW} {
-    background: linear-gradient(
-        to right,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
-      ),
-      linear-gradient(
-        to left,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    left: calc(100% - ${tableOverflowShadowWidthWide}px);
-  }
-  .${ClassName.WITH_CONTROLS} {
-    ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
-    .${ClassName.TABLE_LEFT_SHADOW} {
-      border-left: 1px solid ${tableBorderColor};
-    }
-  }
+	.${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
+		display: block;
+		height: calc(100% - ${tableMarginTop}px);
+		position: absolute;
+		pointer-events: none;
+		top: ${tableMarginTop}px;
+		z-index: ${akEditorShadowZIndex};
+		width: ${tableOverflowShadowWidthWide}px;
+	}
+	.${ClassName.TABLE_LEFT_SHADOW} {
+		background: linear-gradient(
+				to left,
+				transparent 0,
+				${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
+			),
+			linear-gradient(
+				to right,
+				${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+				transparent 1px
+			);
+		left: 0px;
+	}
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
+		left: ${akEditorTableNumberColumnWidth - 1}px;
+	}
+	.${ClassName.TABLE_RIGHT_SHADOW} {
+		background: linear-gradient(
+				to right,
+				transparent 0,
+				${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
+			),
+			linear-gradient(
+				to left,
+				${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+				transparent 1px
+			);
+		left: calc(100% - ${tableOverflowShadowWidthWide}px);
+	}
+	.${ClassName.WITH_CONTROLS} {
+		${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
+		.${ClassName.TABLE_LEFT_SHADOW} {
+			border-left: 1px solid ${tableBorderColor};
+		}
+	}
 `;
 const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
   if (!isDragAndDropEnabled) {
     return css`
-      .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-        height: calc(100% - ${tableMarginTopWithControl}px);
-        top: ${tableMarginTopWithControl}px;
-      }
-    `;
+			.${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
+				height: calc(100% - ${tableMarginTopWithControl}px);
+				top: ${tableMarginTopWithControl}px;
+			}
+		`;
   }
 };
 const columnHeaderButton = cssString => {
@@ -334,94 +327,94 @@ const columnHeaderButtonSelected = () => css({
 });
 const getFloatingDotOverrides = () => {
   return css`
-    tr
-      th:last-child
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
-      tr
-      td:last-child
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
-      content: '';
-      background-color: ${tableBorderColor};
-      position: absolute;
-      height: ${lineMarkerSize}px;
-      width: ${lineMarkerSize}px;
-      border-radius: 50%;
-      pointer-events: none;
-      top: ${"var(--ds-space-025, 2px)"};
-      right: 0px;
-    }
-  `;
+		tr
+			th:last-child
+			.${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
+			tr
+			td:last-child
+			.${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
+			content: '';
+			background-color: ${tableBorderColor};
+			position: absolute;
+			height: ${lineMarkerSize}px;
+			width: ${lineMarkerSize}px;
+			border-radius: 50%;
+			pointer-events: none;
+			top: ${"var(--ds-space-025, 2px)"};
+			right: 0px;
+		}
+	`;
 };
 export const floatingColumnControls = () => {
   return css`
-    .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
-      box-sizing: border-box;
-      position: absolute;
-      top: 0;
-
-      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
-        display: flex;
-        flex-direction: row;
-      }
-    }
-
-    .${ClassName.DRAG_COLUMN_CONTROLS} {
-      box-sizing: border-box;
-
-      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
-        display: grid;
-        justify-items: center;
-      }
-    }
-  `;
+		.${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
+			box-sizing: border-box;
+			position: absolute;
+			top: 0;
+
+			.${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
+				display: flex;
+				flex-direction: row;
+			}
+		}
+
+		.${ClassName.DRAG_COLUMN_CONTROLS} {
+			box-sizing: border-box;
+
+			.${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
+				display: grid;
+				justify-items: center;
+			}
+		}
+	`;
 };
 export const rowControlsWrapperDotStyle = () => {
   return css`
-    // override for DnD controls
-    div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
-      display: none;
-    }
-
-    div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-      content: ' ';
-      background-color: ${tableBorderColor};
-      position: absolute;
-      height: ${lineMarkerSize}px;
-      width: ${lineMarkerSize}px;
-      border-radius: 50%;
-      pointer-events: none;
-      top: -${tableToolbarSize + tableCellBorderWidth}px;
-      right: -1px;
-    }
-  `;
+		// override for DnD controls
+		div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
+			display: none;
+		}
+
+		div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+			content: ' ';
+			background-color: ${tableBorderColor};
+			position: absolute;
+			height: ${lineMarkerSize}px;
+			width: ${lineMarkerSize}px;
+			border-radius: 50%;
+			pointer-events: none;
+			top: -${tableToolbarSize + tableCellBorderWidth}px;
+			right: -1px;
+		}
+	`;
 };
 export const columnControlsDecoration = () => {
   return css`
-    .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-      display: none;
-      cursor: pointer;
-      position: absolute;
-      width: 100%;
-      left: 0;
-      top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-      height: ${columnControlsDecorationHeight}px;
-      // floating dot for adding column button
-      &::before {
-        content: ' ';
-        background-color: ${tableBorderColor};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: 2px;
-        right: ${"var(--ds-space-negative-025, -2px)"};
-      }
-
-      &::after {
-        content: ' ';
-
-        ${columnHeaderButton(`
+		.${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+			display: none;
+			cursor: pointer;
+			position: absolute;
+			width: 100%;
+			left: 0;
+			top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+			height: ${columnControlsDecorationHeight}px;
+			// floating dot for adding column button
+			&::before {
+				content: ' ';
+				background-color: ${tableBorderColor};
+				position: absolute;
+				height: ${lineMarkerSize}px;
+				width: ${lineMarkerSize}px;
+				border-radius: 50%;
+				pointer-events: none;
+				top: 2px;
+				right: ${"var(--ds-space-negative-025, -2px)"};
+			}
+
+			&::after {
+				content: ' ';
+
+				${columnHeaderButton(`
         border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-top: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor};
@@ -433,133 +426,128 @@ export const columnControlsDecoration = () => {
         left: 0px;
         z-index: ${columnControlsZIndex};
       `)}
-      }
-    }
-
-    // floating dot for adding column button - overriding style on last column to avoid scroll
-    ${getFloatingDotOverrides()}
-
-    .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-      display: block;
-    }
-
-    table
-      tr:first-of-type
-      td.${ClassName.TABLE_CELL},table
-      tr:first-of-type
-      th.${ClassName.TABLE_HEADER_CELL} {
-      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected()};
-        }
-
-        &.${ClassName.HOVERED_CELL_IN_DANGER}
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          background-color: ${tableToolbarDeleteColor};
-          border-color: ${tableBorderDeleteColor};
-          z-index: ${akEditorUnitZIndex * 100};
-        }
-      }
-    }
-
-    table
-      tr:first-of-type
-      td.${ClassName.TABLE_CELL},table
-      tr:first-of-type
-      th.${ClassName.TABLE_HEADER_CELL} {
-      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected()};
-          border-left: ${tableCellBorderWidth}px solid
-            ${tableBorderSelectedColor};
-          left: -${tableCellBorderWidth}px;
-        }
-      }
-    }
-
-    table
-      tr:first-of-type
-      td.${ClassName.TABLE_CELL},
-      table
-      tr:first-of-type
-      th.${ClassName.TABLE_HEADER_CELL} {
-      &.${ClassName.HOVERED_COLUMN} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected()};
-        }
-
-        &.${ClassName.HOVERED_CELL_IN_DANGER}
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          background-color: ${tableToolbarDeleteColor};
-          border-color: ${tableBorderDeleteColor};
-          border-left: ${tableCellBorderWidth}px solid ${tableBorderDeleteColor};
-          left: -${tableCellBorderWidth}px;
-          z-index: ${akEditorUnitZIndex * 100};
-        }
-      }
-    }
-
-    .${ClassName.TABLE_SELECTED}
-      table
-      tr:first-of-type
-      td.${ClassName.TABLE_CELL},
-      .${ClassName.TABLE_SELECTED}
-      table
-      tr:first-of-type
-      th.${ClassName.TABLE_HEADER_CELL} {
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        ${columnHeaderButtonSelected()};
-      }
-    }
-  `;
+			}
+		}
+
+		// floating dot for adding column button - overriding style on last column to avoid scroll
+		${getFloatingDotOverrides()}
+
+		.${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+			display: block;
+		}
+
+		table
+			tr:first-of-type
+			td.${ClassName.TABLE_CELL},table
+			tr:first-of-type
+			th.${ClassName.TABLE_HEADER_CELL} {
+			&.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
+				.${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					${columnHeaderButtonSelected()};
+				}
+
+				&.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					background-color: ${tableToolbarDeleteColor};
+					border-color: ${tableBorderDeleteColor};
+					z-index: ${akEditorUnitZIndex * 100};
+				}
+			}
+		}
+
+		table
+			tr:first-of-type
+			td.${ClassName.TABLE_CELL},table
+			tr:first-of-type
+			th.${ClassName.TABLE_HEADER_CELL} {
+			&.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+				.${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					${columnHeaderButtonSelected()};
+					border-left: ${tableCellBorderWidth}px solid ${tableBorderSelectedColor};
+					left: -${tableCellBorderWidth}px;
+				}
+			}
+		}
+
+		table
+			tr:first-of-type
+			td.${ClassName.TABLE_CELL},
+			table
+			tr:first-of-type
+			th.${ClassName.TABLE_HEADER_CELL} {
+			&.${ClassName.HOVERED_COLUMN} {
+				.${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					${columnHeaderButtonSelected()};
+				}
+
+				&.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					background-color: ${tableToolbarDeleteColor};
+					border-color: ${tableBorderDeleteColor};
+					border-left: ${tableCellBorderWidth}px solid ${tableBorderDeleteColor};
+					left: -${tableCellBorderWidth}px;
+					z-index: ${akEditorUnitZIndex * 100};
+				}
+			}
+		}
+
+		.${ClassName.TABLE_SELECTED}
+			table
+			tr:first-of-type
+			td.${ClassName.TABLE_CELL},
+			.${ClassName.TABLE_SELECTED}
+			table
+			tr:first-of-type
+			th.${ClassName.TABLE_HEADER_CELL} {
+			.${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+				${columnHeaderButtonSelected()};
+			}
+		}
+	`;
 };
 export const hoveredDeleteButton = () => css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
-    .${ClassName.SELECTED_CELL},
-      .${ClassName.COLUMN_SELECTED},
-      .${ClassName.HOVERED_CELL} {
-      border: 1px solid ${tableBorderDeleteColor};
-    }
-    .${ClassName.SELECTED_CELL}::after {
-      background: ${tableCellDeleteColor};
-    }
-
-    .${ClassName.TABLE_NODE_WRAPPER} > table {
-      td.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
-        background: ${tableCellDeleteColor};
-        border: 1px solid ${tableBorderDeleteColor};
-      }
-      th.${ClassName.HOVERED_NO_HIGHLIGHT} {
-        background-color: unset;
-      }
-      th.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
-        background: ${tableCellDeleteColor};
-        border: 1px solid ${tableBorderDeleteColor};
-      }
-    }
-  }
+	.${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
+		.${ClassName.SELECTED_CELL}, .${ClassName.COLUMN_SELECTED}, .${ClassName.HOVERED_CELL} {
+			border: 1px solid ${tableBorderDeleteColor};
+		}
+		.${ClassName.SELECTED_CELL}::after {
+			background: ${tableCellDeleteColor};
+		}
+
+		.${ClassName.TABLE_NODE_WRAPPER} > table {
+			td.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
+				background: ${tableCellDeleteColor};
+				border: 1px solid ${tableBorderDeleteColor};
+			}
+			th.${ClassName.HOVERED_NO_HIGHLIGHT} {
+				background-color: unset;
+			}
+			th.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
+				background: ${tableCellDeleteColor};
+				border: 1px solid ${tableBorderDeleteColor};
+			}
+		}
+	}
 `;
 export const hoveredCell = () => css`
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
-    .${ClassName.HOVERED_CELL} {
-      position: relative;
-      border: 1px solid ${tableBorderSelectedColor};
-    }
-    .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_NO_HIGHLIGHT} {
-      position: relative;
-      border: 1px solid ${tableBorderColor};
-    }
-  }
+	:not(.${ClassName.IS_RESIZING})
+		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+		.${ClassName.HOVERED_CELL} {
+			position: relative;
+			border: 1px solid ${tableBorderSelectedColor};
+		}
+		.${ClassName.HOVERED_CELL}.${ClassName.HOVERED_NO_HIGHLIGHT} {
+			position: relative;
+			border: 1px solid ${tableBorderColor};
+		}
+	}
 `;
 export const hoveredWarningCell = css`
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
-    td.${ClassName.HOVERED_CELL_WARNING} {
-      background-color: ${`var(--ds-background-warning, ${Y50})`} !important; // We need to override the background-color added to the cell
-      border: 1px solid ${`var(--ds-border-warning, ${Y200})`};
-    }
-  }
+	:not(.${ClassName.IS_RESIZING})
+		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+		td.${ClassName.HOVERED_CELL_WARNING} {
+			background-color: ${`var(--ds-background-warning, ${Y50})`} !important; // We need to override the background-color added to the cell
+			border: 1px solid ${`var(--ds-border-warning, ${Y200})`};
+		}
+	}
 `;
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
@@ -567,109 +555,108 @@ export const hoveredWarningCell = css`
 const resizeHandleOverrides = isDragAndDropEnabled => {
   if (isDragAndDropEnabled) {
     return css`
-      th.${ClassName.WITH_RESIZE_LINE}::before,
-        td.${ClassName.WITH_RESIZE_LINE}::before {
-        content: ' ';
-        position: absolute;
-        left: ${"var(--ds-space-negative-025, -2px)"};
-        top: -1px;
-        width: ${resizeLineWidth}px;
-        height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor};
-        z-index: ${columnControlsZIndex * 2};
-      }
-
-      th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before,
-        td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
-        content: ' ';
-        position: absolute;
-        right: -1px;
-        top: -1px;
-        width: ${resizeLineWidth}px;
-        height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor};
-        z-index: ${columnControlsZIndex * 2};
-      }
-    `;
+			th.${ClassName.WITH_RESIZE_LINE}::before, td.${ClassName.WITH_RESIZE_LINE}::before {
+				content: ' ';
+				position: absolute;
+				left: ${"var(--ds-space-negative-025, -2px)"};
+				top: -1px;
+				width: ${resizeLineWidth}px;
+				height: calc(100% + 2px);
+				background-color: ${tableBorderSelectedColor};
+				z-index: ${columnControlsZIndex * 2};
+			}
+
+			th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before,
+				td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+				content: ' ';
+				position: absolute;
+				right: -1px;
+				top: -1px;
+				width: ${resizeLineWidth}px;
+				height: calc(100% + 2px);
+				background-color: ${tableBorderSelectedColor};
+				z-index: ${columnControlsZIndex * 2};
+			}
+		`;
   }
   return css`
-    td.${ClassName.WITH_RESIZE_LINE}::before {
-      content: ' ';
-      position: absolute;
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      top: -1px;
-      width: ${resizeLineWidth}px;
-      height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
-    }
-
-    th.${ClassName.WITH_RESIZE_LINE}::before {
-      content: ' ';
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      position: absolute;
-      width: ${resizeLineWidth}px;
-      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
-      top: -${tableToolbarSize + tableCellBorderWidth}px;
-    }
-
-    td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
-      content: ' ';
-      position: absolute;
-      right: -1px;
-      top: -1px;
-      width: ${resizeLineWidth}px;
-      height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
-    }
-
-    th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
-      content: ' ';
-      right: -1px;
-      position: absolute;
-      width: ${resizeLineWidth}px;
-      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor};
-      z-index: ${columnControlsZIndex * 2};
-      top: -${tableToolbarSize + tableCellBorderWidth}px;
-    }
-  `;
+		td.${ClassName.WITH_RESIZE_LINE}::before {
+			content: ' ';
+			position: absolute;
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -1px;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + 2px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+		}
+
+		th.${ClassName.WITH_RESIZE_LINE}::before {
+			content: ' ';
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			position: absolute;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+			top: -${tableToolbarSize + tableCellBorderWidth}px;
+		}
+
+		td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+			content: ' ';
+			position: absolute;
+			right: -1px;
+			top: -1px;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + 2px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+		}
+
+		th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+			content: ' ';
+			right: -1px;
+			position: absolute;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+			top: -${tableToolbarSize + tableCellBorderWidth}px;
+		}
+	`;
 };
 export const resizeHandle = isDragAndDropEnabled => css`
-  .${ClassName.TABLE_CONTAINER} {
-    .${ClassName.RESIZE_HANDLE_DECORATION} {
-      background-color: transparent;
-      position: absolute;
-      width: ${resizeHandlerAreaWidth}px;
-      height: 100%;
-      top: 0;
-      right: -${resizeHandlerAreaWidth / 2}px;
-      cursor: col-resize;
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    tr
-      th:last-child
-      .${ClassName.RESIZE_HANDLE_DECORATION},
-      tr
-      td:last-child
-      .${ClassName.RESIZE_HANDLE_DECORATION} {
-      background-color: transparent;
-      position: absolute;
-      width: ${resizeHandlerAreaWidth / 2}px;
-      height: 100%;
-      top: 0;
-      right: 0;
-      cursor: col-resize;
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    ${resizeHandleOverrides(isDragAndDropEnabled)}
-
-    table
+	.${ClassName.TABLE_CONTAINER} {
+		.${ClassName.RESIZE_HANDLE_DECORATION} {
+			background-color: transparent;
+			position: absolute;
+			width: ${resizeHandlerAreaWidth}px;
+			height: 100%;
+			top: 0;
+			right: -${resizeHandlerAreaWidth / 2}px;
+			cursor: col-resize;
+			z-index: ${resizeHandlerZIndex};
+		}
+
+		tr
+			th:last-child
+			.${ClassName.RESIZE_HANDLE_DECORATION},
+			tr
+			td:last-child
+			.${ClassName.RESIZE_HANDLE_DECORATION} {
+			background-color: transparent;
+			position: absolute;
+			width: ${resizeHandlerAreaWidth / 2}px;
+			height: 100%;
+			top: 0;
+			right: 0;
+			cursor: col-resize;
+			z-index: ${resizeHandlerZIndex};
+		}
+
+		${resizeHandleOverrides(isDragAndDropEnabled)}
+
+		table
       tr:first-of-type
       th.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after,
@@ -677,10 +664,10 @@ export const resizeHandle = isDragAndDropEnabled => css`
       tr:first-of-type
       td.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-      top: -${tableToolbarSize + tableCellBorderWidth}px;
-      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-    }
-  }
+			top: -${tableToolbarSize + tableCellBorderWidth}px;
+			height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
+		}
+	}
 `;
 
 // Drag and Drop: drop target insert line
@@ -710,137 +697,137 @@ const insertLineInactiveColor = css({
 // or column drag
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const insertLine = () => css`
-  .${ClassName.TABLE_CONTAINER} {
-    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: -1px;
-      top: -1px;
-      ${insertLineActiveColor}
-    }
-
-    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: -1px;
-      top: -1px;
-      ${insertLineInactiveColor}
-    }
-
-    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: -1px;
-      top: -${tableCellBorderWidth}px;
-      ${insertLineActiveColor}
-    }
-
-    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: -1px;
-      top: -${tableCellBorderWidth}px;
-      ${insertLineInactiveColor}
-    }
-
-    td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      top: -1px;
-      ${insertLineActiveColor}
-    }
-
-    td.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      top: -1px;
-      ${insertLineInactiveColor}
-    }
-
-    th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      top: -${tableCellBorderWidth}px;
-      ${insertLineActiveColor}
-    }
-
-    th.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      left: ${"var(--ds-space-negative-025, -2px)"};
-      top: -${tableCellBorderWidth}px;
-      ${insertLineInactiveColor}
-    }
-
-    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      right: -1px;
-      top: -1px;
-      ${insertLineActiveColor}
-    }
-
-    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      right: -1px;
-      top: -1px;
-      ${insertLineInactiveColor}
-    }
-
-    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
-      ${tableCellColumnInsertLineStyles}
-      right: -1px;
-      top: -${tableCellBorderWidth}px;
-      ${insertLineActiveColor}
-    }
-
-    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
-      ${tableCellColumnInsertLineStyles}
-      right: -1px;
-      top: -${tableCellBorderWidth}px;
-      ${insertLineInactiveColor}
-    }
-
-    td.${ClassName.WITH_ROW_INSERT_LINE}::before {
-      ${tableCellRowInsertLineStyles}
-      top: -1px;
-      ${insertLineActiveColor}
-    }
-
-    td.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
-      ${tableCellRowInsertLineStyles}
-      top: -1px;
-      ${insertLineInactiveColor}
-    }
-
-    th.${ClassName.WITH_ROW_INSERT_LINE}::before {
-      ${tableCellRowInsertLineStyles}
-      top: -1px;
-      ${insertLineActiveColor}
-    }
-
-    th.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
-      ${tableCellRowInsertLineStyles}
-      top: -1px;
-      ${insertLineInactiveColor}
-    }
-
-    td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      ${tableCellRowInsertLineStyles}
-      bottom: 0;
-      ${insertLineActiveColor}
-    }
-
-    td.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
-      ${tableCellRowInsertLineStyles}
-      bottom: 0;
-      ${insertLineInactiveColor}
-    }
-
-    th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
-      ${tableCellRowInsertLineStyles}
-      bottom: 0;
-      ${insertLineActiveColor}
-    }
-
-    th.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
-      ${tableCellRowInsertLineStyles}
-      bottom: 0;
-      ${insertLineInactiveColor}
-    }
-  }
+	.${ClassName.TABLE_CONTAINER} {
+		td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: -1px;
+			top: -1px;
+			${insertLineActiveColor}
+		}
+
+		td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: -1px;
+			top: -1px;
+			${insertLineInactiveColor}
+		}
+
+		th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: -1px;
+			top: -${tableCellBorderWidth}px;
+			${insertLineActiveColor}
+		}
+
+		th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: -1px;
+			top: -${tableCellBorderWidth}px;
+			${insertLineInactiveColor}
+		}
+
+		td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -1px;
+			${insertLineActiveColor}
+		}
+
+		td.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -1px;
+			${insertLineInactiveColor}
+		}
+
+		th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -${tableCellBorderWidth}px;
+			${insertLineActiveColor}
+		}
+
+		th.${ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -${tableCellBorderWidth}px;
+			${insertLineInactiveColor}
+		}
+
+		td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			right: -1px;
+			top: -1px;
+			${insertLineActiveColor}
+		}
+
+		td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			right: -1px;
+			top: -1px;
+			${insertLineInactiveColor}
+		}
+
+		th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+			${tableCellColumnInsertLineStyles}
+			right: -1px;
+			top: -${tableCellBorderWidth}px;
+			${insertLineActiveColor}
+		}
+
+		th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE}::before {
+			${tableCellColumnInsertLineStyles}
+			right: -1px;
+			top: -${tableCellBorderWidth}px;
+			${insertLineInactiveColor}
+		}
+
+		td.${ClassName.WITH_ROW_INSERT_LINE}::before {
+			${tableCellRowInsertLineStyles}
+			top: -1px;
+			${insertLineActiveColor}
+		}
+
+		td.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+			${tableCellRowInsertLineStyles}
+			top: -1px;
+			${insertLineInactiveColor}
+		}
+
+		th.${ClassName.WITH_ROW_INSERT_LINE}::before {
+			${tableCellRowInsertLineStyles}
+			top: -1px;
+			${insertLineActiveColor}
+		}
+
+		th.${ClassName.WITH_ROW_INSERT_LINE_INACTIVE}::before {
+			${tableCellRowInsertLineStyles}
+			top: -1px;
+			${insertLineInactiveColor}
+		}
+
+		td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+			${tableCellRowInsertLineStyles}
+			bottom: 0;
+			${insertLineActiveColor}
+		}
+
+		td.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+			${tableCellRowInsertLineStyles}
+			bottom: 0;
+			${insertLineInactiveColor}
+		}
+
+		th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+			${tableCellRowInsertLineStyles}
+			bottom: 0;
+			${insertLineActiveColor}
+		}
+
+		th.${ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE}::before {
+			${tableCellRowInsertLineStyles}
+			bottom: 0;
+			${insertLineInactiveColor}
+		}
+	}
 `;