@import (reference) '../../styles/mixins';
@import (reference) '../../styles/variables';
@import './table.common';

:root {
	--table-creator-cell-size: 20px;
	--color-background-table-creator-cell: #242a3c;
}

.jodit-form__inserter {
	.jodit-form__table-creator-box {
		display: flex;
		padding: 20px;

		@media (max-width: @screen-sm) {
			flex-direction: column;
		}

		.jodit-form__container {
			min-width: 180px;
			padding: 0;
			margin: 0;
			font-size: 0;

			display: flex;
			flex-direction: column;
			gap: 1px;

			& > div {
				display: flex;
				gap: 1px;
				& > span {
					display: inline-block;

					width: var(--table-creator-cell-size);
					height: var(--table-creator-cell-size);

					border-radius: 2px;
					box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
					vertical-align: top;

					&.jodit_hovered {
						background: var(--color-background-table-creator-cell);
					}
				}
			}
		}

		.jodit-form__options {
			font-size: var(--font-size-default);

			label {
				padding-top: 0;
				text-align: left;

				input {
					margin-right: var(--padding-default);
				}
			}
		}
	}

	label {
		padding: 8px;
		margin: 0;
		font-size: 14px;
		text-align: center;
	}
}