:root {
	--ska-array-editor-height: 32px;
	--ska-array-editor-gap: 8px;
	--ska-array-editor-border-radius: 2px;
	--ska-array-editor-border-color: #757575;
	--ska-array-editor-border-color--focus: var(--wp-admin-theme-color);
}

.ska-array-editor {
	margin-bottom: 0 !important;

	&--large {
		--ska-array-editor-height: 40px;
	}

	& > .components-base-control__field {
		display: flex;
		flex-direction: column;
		gap: var(--ska-array-editor-gap);

		& > .components-base-control__label {
			cursor: default;
			// margin-bottom: calc(var(--ska-array-editor-gap) / 2 * -1);
			margin-bottom: 0;
		}

		& > .ska-array-editor__row {
			display: flex;
			flex-direction: row;

			& > .components-base-control {
				flex-grow: 1;
				margin: 0;

				& > .components-base-control__field {
					margin: 0;

					& > input {
						height: var(--ska-array-editor-height);
						line-height: var(--ska-array-editor-height);
						margin: 0;
						border-right: 0;
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;

						&[disabled] {
							cursor: not-allowed;
							color: #2c3338;
							background: #f0f0f0;
						}
					}
				}

				&.ska-array-editor__row__key {
					max-width: 42px;

					input[type="text"] {
						text-align: center;
					}
				}
			}

			& > * {
				&, & input {
					border-radius: 0;
				}
			}

			& > *:first-child {
				&, & input {
					border-top-left-radius: var(--ska-array-editor-border-radius);
					border-bottom-left-radius: var(--ska-array-editor-border-radius);
				}
			}

			& > *:last-child {
				&, & input {
					border-top-right-radius: var(--ska-array-editor-border-radius);
					border-bottom-right-radius: var(--ska-array-editor-border-radius);
				}
			}

			input {
				border-color: var(--ska-array-editor-border-color);
			}

			.ska-button-grid {
				box-shadow: 0 0 0 1px inset var(--ska-array-editor-border-color);
			}

			&:focus-within {

				input {
					box-shadow: none;
					border-color: var(--ska-array-editor-border-color--focus);
				}

				.ska-button-grid {
					box-shadow: 0 0 0 1px inset var(--ska-array-editor-border-color--focus);
				}
			}

			/** Any (custom) button rendered inside. */
			& > .components-button {
				height: auto;
			}

			/** Action input as ValueControl. */
			& > .ska-action-input {
				--ska-action-input-height: var(--ska-array-editor-height) !important;

				flex-grow: 1;

				.components-button {
					height: auto;
					border-radius: 0;

					&.has-icon > svg {
						width: calc(var(--ska-array-editor-height) - 12px);
						height: calc(var(--ska-array-editor-height) - 12px);
					}
				}
			}
		}
	}
}