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

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

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

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

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

		& > .ska-record-editor__row {
			display: flex;
			flex-direction: row;
			align-items: flex-end;

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

				&:nth-child(2) {
					flex-grow: 1;
				}

				.components-base-control__field {
					margin: 0;

					.components-text-control__input {
						height: var(--ska-record-editor-height);
						line-height: var(--ska-record-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;
						}
					}
				}

				& + .components-base-control .components-text-control__input {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}
			}

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

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

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

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

			&--single > .components-base-control {

				&:nth-child(1) {
					flex-grow: 1;
				}
			}

			& > button {
				display: flex;
				height: var(--ska-record-editor-height);
				border-right-width: 0;
				border-radius: 0;
				box-shadow: none;

				/** `Help` button. */
				&.is-secondary {
					border-top: 1px solid var(--ska-record-editor-border-color);
					border-bottom: 1px solid var(--ska-record-editor-border-color);

					&:hover {
						box-shadow: none;
					}
				}

				/** `Add` button. */
				&.button-primary {
					order: 1; // Rendered first for tabindex.

					&:focus {
						color: #fff;
						background-color: var(--wp-admin-theme-color-darker-10);
						box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
					}

					&:active {
						color: #fff;
					}
				}

				&.icon-button {
					padding: 6px;
				}

				&.is-last {
					border-right-width: 1px;
					border-top-right-radius: var(--ska-record-editor-border-radius);
					border-bottom-right-radius: var(--ska-record-editor-border-radius);
				}

				&:hover ~ button {
					border-left-color: var(--wp-admin-theme-color-darker-10);
				}
			}

			&:focus-within {

				.components-text-control__input {
					box-shadow: none;
					border-color: var(--wp-admin-theme-color);
				}

				button {
					border-top-color: var(--wp-admin-theme-color);
					border-bottom-color: var(--wp-admin-theme-color);

					&:last-child {
						border-right-color: var(--wp-admin-theme-color);
					}
				}
			}

			&--invalid input {
				border-color: #cc1818 !important;
				background-color: #cc18180d !important;
			}
		}
	}

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

	&__footer {

		p {
			font-size: 12px;
			font-style: normal;
			color: rgb(117, 117, 117);
		}
	}
}