@use "sass:math";
@use "~@wordpress/base-styles/variables" as variables;
@use "~@wordpress/base-styles/colors" as colors;
@use "settings/global-settings/style" as globalSettings;
@use "controls/style" as controls;

$row-column-selector-size: variables.$grid-unit-20; // 16px
$row-column-inserter-button-size: variables.$grid-unit-20 + variables.$grid-unit-05; // 20px
$row-column-inserter-dot-size: 6px;

.editor-styles-wrapper .wp-block-flexible-table-block-table {
	box-sizing: border-box;

	> table {

		&.has-fixed-layout {
			table-layout: fixed;
		}

		thead,
		tbody,
		tfoot {

			th,
			td {
				position: relative;
				min-width: auto;

				&.is-selected::after {
					position: absolute;
					top: 2px;
					right: 2px;
					bottom: 2px;
					left: 2px;
					pointer-events: none;
					content: "";
					border: 2px solid var(--wp-admin-theme-color);
				}

				.block-editor-rich-text__editable {
					word-break: normal;
					overflow-wrap: anywhere;
				}
			}
		}
	}

	> figcaption {
		position: relative;
		z-index: 1;
	}

	&.is-selected {

		> table {

			th,
			td {

				.block-editor-rich-text__editable {
					border: variables.$border-width dotted colors.$gray-400;
				}
			}
		}

		&.show-dot-on-th th::before {
			position: absolute;
			top: 6px;
			right: 6px;
			z-index: 1;
			width: 6px;
			height: 6px;
			content: "";
			background: var(--wp-admin-theme-color);
			border-radius: variables.$radius-round;
		}

		&.show-control-button:not(.is-content-only) {
			padding-left: variables.$grid-unit-50;

			&.is-caption-side-bottom {
				padding-top: variables.$grid-unit-50;
			}

			&.is-caption-side-top > table {
				margin-top: variables.$grid-unit-50;
			}
		}
	}

	&.is-content-justification-left,
	&.is-content-justification-center,
	&.is-content-justification-right {
		display: flex;
		flex-flow: column;

		figcaption {
			align-self: stretch;
		}
	}

	&.is-content-justification-left {
		align-items: flex-start;
	}

	&.is-content-justification-center {
		align-items: center;
	}

	&.is-content-justification-right {
		align-items: flex-end;
	}

	.ftb-placeholder {
		// Reset typography support styles
		font-style: normal;
		font-weight: normal;
		line-height: initial;
		text-transform: none;
		letter-spacing: 0;

		code {
			padding: math.div(variables.$grid-unit-05, 2) variables.$grid-unit-05;
			margin: 0;
			font-family: variables.$font-family-mono;
			font-size: inherit;
			background: colors.$gray-100;
		}
	}

	.ftb-placeholder__table-wrap {
		width: 100%;
		background-color: colors.$gray-100;
		box-sizing: border-box;
	}

	.ftb-placeholder__table {
		width: 100%;
		max-width: variables.$grid-unit-80 * 5; // 320px
		vertical-align: middle;
		table-layout: fixed;
		border-spacing: variables.$grid-unit-05;
		border-collapse: separate;

		th,
		td {
			padding: 0 !important;
		}

		thead th {
			background-color: var(--wp-admin-theme-color);
			border: variables.$border-width colors.$gray-900 solid;
		}

		tbody td,
		tfoot td {
			background-color: colors.$white;
			border: variables.$border-width colors.$gray-900 solid;
		}

		&.is-overflow-col tr *:nth-last-child(2) {
			position: relative;
			text-align: center;
			background-color: transparent;
			border: none;

			&::before {
				display: block;
				font-weight: normal;
				line-height: 0;
				content: "...";
			}
		}

		&.is-overflow-row {

			tbody tr:nth-last-child(2) td {
				position: relative;
				text-align: center;
				background-color: transparent;
				border: none;

				&::before {
					display: block;
					line-height: 0;
					content: "...";
				}
			}
		}
	}

	.ftb-placeholder__input {
		width: variables.$grid-unit-10 * 14; // 112px
	}

	.ftb-table-cell-label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		height: auto;
		padding: 0 variables.$grid-unit-05;
		font-size: variables.$font-size-x-small;
		line-height: variables.$font-line-height-x-small;
		border-radius: 0;
	}

	.ftb-row-before-inserter,
	.ftb-row-after-inserter,
	.ftb-column-before-inserter,
	.ftb-column-after-inserter {
		position: absolute;
		width: $row-column-inserter-button-size;
		min-width: 0;
		height: $row-column-inserter-button-size;
		padding: 0;
		color: transparent;
		background: transparent;
		border-radius: variables.$radius-round;

		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			width: $row-column-inserter-dot-size;
			height: $row-column-inserter-dot-size;
			padding: 0;
			content: "";
			background: colors.$gray-200;
			border-radius: variables.$radius-round;
			transform: translate(-50%, -50%);
		}

		&:hover,
		&:focus {
			color: colors.$white;
			background: var(--wp-admin-theme-color);

			&::before {
				content: none;
			}

			&:active {
				color: colors.$white;
			}
		}
	}

	.ftb-row-before-inserter {
		top: math.div($row-column-inserter-button-size, 2) * -1; // -9px
		left: variables.$grid-unit-50 * -1; // -40px;

		&.has-prev-section {
			top: 0;
		}
	}

	.ftb-row-after-inserter {
		bottom: math.div($row-column-inserter-button-size, 2) * -1;
		left: variables.$grid-unit-50 * -1; // -40px;

		&.has-next-section {
			bottom: 0;
		}
	}

	.ftb-column-before-inserter {
		top: variables.$grid-unit-50 * -1; // -40px
		left: math.div($row-column-inserter-button-size, 2) * -1; // -10px
	}

	.ftb-column-after-inserter {
		top: variables.$grid-unit-50 * -1; // -40px
		right: math.div($row-column-inserter-button-size, 2) * -1; // -10px
	}

	.ftb-row-selector,
	.ftb-column-selector {
		position: absolute;
		justify-content: center;
		min-width: 0;
		padding: 0;
		color: colors.$gray-900;
		background: colors.$gray-200;

		svg {
			margin-right: 0;
		}
	}

	.ftb-row-selector {
		top: 1px;
		left: ($row-column-selector-size + 2) * -1;
		width: $row-column-selector-size;
		height: calc(100% - 2px);
		border-radius: variables.$radius-small 0 0 variables.$radius-small;
	}

	.ftb-column-selector {
		top: ($row-column-selector-size + 2) * -1;
		left: 1px;
		width: calc(100% - 2px);
		height: $row-column-selector-size;
		border-radius: variables.$radius-small variables.$radius-small 0 0;
	}

	.ftb-row-remover,
	.ftb-column-remover {
		position: absolute;
		z-index: 1;
		min-width: 0;
		padding: 0;
		background: colors.$white;
		border-radius: variables.$radius-small;
		box-shadow: 0 0 0 variables.$border-width colors.$gray-900, variables.$elevation-x-small;
	}

	.ftb-row-remover {
		top: 50%;
		left: variables.$grid-unit-70 * -1; // -56px
		margin-top: math.div(variables.$button-size-compact, 2) * -1; // -16px
	}

	.ftb-column-remover {
		top: variables.$grid-unit-70 * -1; // -56px
		left: 50%;
		margin-left: math.div(variables.$button-size-compact, 2) * -1; // -16px
	}
}