.rdb-settings-page_add-edit {
	height: calc(100vh - 200px);
	display: grid;
	grid-template-rows: 1fr min-content auto;
	overflow-y: scroll;
}

.rdb-settings-page_sources {

	@media screen and (min-width: 782px) {
		height: calc(100vh - 175px);
	}
}

.rdb-settings-page_data-source-form-footer {
	position: fixed;
	bottom: 0;
	width: 100%;

	@media screen and (min-width: 782px) {

		left: calc(var(--wp-admin-menu-width, 160px));
		width: calc(100% - var(--wp-admin-menu-width, 160px));
	}


	.rdb-settings-page_data-source-form-setup-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		gap: 12px;
		border-top: 1px solid var(--Gutenberg-Gray-100, #f0f0f0);
		background: var(--Gutenberg-White, #fff);

		@media screen and (min-width: 782px) {
			padding: 16px 0;
		}

	}

	button {
		display: flex;
		width: 244px;
		padding: var(--grid-unit-10, 8px);
		justify-content: center;
		align-items: center;
	}
}

.rdb-settings-page_data-source-form-setup-info {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
	padding: 16px;

	svg {
		fill: var(--Gutenberg-Alert-Green, #4ab866);
		flex-shrink: 0;
	}

	p {
		color: var(--Gutenberg-Gray-700, #757575);
		font-size: var(--s, 12px);
		line-height: var(--xs, 16px);
		margin-top: 4px;
		max-width: 500px;
	}

}

body.folded .rdb-settings-page_data-source-form-footer {

	@media screen and (min-width: 782px) {
		left: calc(36px);
		width: calc(100% - 36px);
	}
}

.rdb-settings-page_data-source-single-step-form {
	padding: 24px;

	.rdb-settings_form-heading {
		color: var(--Gutenberg-Gray-900, #1e1e1e);
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		margin-bottom: 0;
	}

	@media screen and (min-width: 782px) {
		padding: 32px 48px 40px 48px;
	}
}


.rdb-settings-page_data-source-form {
	padding: 0 16px 40px;

	@media screen and (min-width: 782px) {
		width: 500px;
		justify-self: center;
	}

	.rdb-settings_form-fields {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.code-input {

		textarea {
			font-family: monospace;
		}
	}

	.components-base-control__help {
		margin-bottom: 1em;

		.status-icon {
			display: flex;
			margin-right: 3px;
		}

		.status-message {
			display: flex;
			align-items: center;
			height: 18px;
		}

		.is-success {
			color: #144722;
		}

		.is-error {
			color: #681f1b;
		}
	}
}

.rdb-settings-page_data-source-form-uuid-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.rdb-settings-page_data-source-form-input.has-error {

	.components-input-control__container .components-input-control__input:not(:focus) {
		border-radius: var(--radius-s, 2px);
		outline: 2px solid var(--Gutenberg-Alert-Red, #cc1818);
		outline-offset: -2px;

	}

	span {
		color: var(--Gutenberg-Alert-Red, #cc1818);
		font-size: var(--s, 12px);
		line-height: var(--xs, 16px);
		margin-top: 4px;
	}
}

.rdb-settings-page_data-source-multi-step-form,
.rdb-settings-page_data-source-single-step-form.rdb-settings-page_data-source-add-form {

	.rdb-settings_form-heading {
		color: var(--Gutenberg-Gray-900, #1e1e1e);
		font-size: 24px;
		font-weight: 500;
		line-height: 24px;
		margin-bottom: 12px;
	}

	.rdb-settings_form-fields {
		margin-top: 40px;
	}

}


.rdb-settings_form-subheading {
	color: var(--Alias-text-text-tertiary, #505050);
	font-size: var(--s, 12px);
	font-style: normal;
	font-weight: var(--Regular, 400);
	line-height: var(--xs, 16px); /* 133.333% */
	margin: 4px 0 16px;
}

.rdb-settings-page_data-source-multi-step-form {
	padding: 24px;

	@media screen and (min-width: 782px) {
		display: grid;
		grid-template-columns: 0.5fr 1fr 0.5fr;
		padding: 56px 48px 0 48px;
	}

	.rdb-settings_form-steps {

		ol {
			list-style: none;
			counter-reset: steps;

			li {
				counter-increment: steps;
				color: var(--Gutenberg-Gray-700, #757575);
				font-weight: 600;
				margin-bottom: 24px;

				&::before {
					content: counter(steps);
					margin-right: 0.5rem;
					background: var(--Gutenberg-Gray-200, #e0e0e0);
					color: var(--Gutenberg-White, #fff);
					width: 24px;
					height: 24px;
					border-radius: 50%;
					display: inline-grid;
					place-items: center;
				}

				&.current-step::before {
					background: var(--Gutenberg-Blueberry, #3858e9);
				}

				&.current-step {
					color: var(--Gutenberg-Gray-900, #1e1e1e);
				}
			}
		}
	}
}

.components-form-token-field__input-container > div:first-child {
	max-height: 220px;
	overflow-y: scroll;
}

.components-form-token-field__input-container.is-active {
	position: relative;
}

/* Default dropdown styling */
.components-form-token-field__suggestions-list {
	position: absolute;
	top: 100%;
	left: -1px;
	background: #fff;
	border: 1px solid var(--wp-admin-theme-color);
	border-radius: 2px;
	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
	outline: 2px solid transparent;
}

/* Position dropdown below the input */
.form-token-field-wrapper.below .components-form-token-field__suggestions-list {
	top: 100%;
	bottom: auto;

}

/* Position dropdown above the input */
.form-token-field-wrapper.above .components-form-token-field__suggestions-list {
	bottom: 100%;
	top: auto;

}
