@use "~admin-stylesheets/colors";

.nelio-content-webhook-settings-control {

	> div,
	> p {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	&__selector {
		margin-bottom: 1em;

		.components-input-control__container {
			max-width: 50%;
		}
	}

	&__url-field {
		margin-top: 1em;
		margin-bottom: 1em;
	}

	&__field {

		&-list {
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			border: 1px solid colors.$layout-colors__border;
			border-radius: 3px;
			margin: 1em 0;
			padding: 1em 1em !important;

			.components-base-control__label {
				margin-bottom: 0;
			}
		}

		&-inner-list {
			display: flex;
			flex-direction: column;

			.components-base-control,
			.components-base-control__field,
			.components-base-control__label {
				margin-bottom: 0;
			}

			.components-dropdown {
				top: -0.5em;
			}

			> div:last-child {
				margin-bottom: 1em;
			}
		}

		&-item {
			display: flex;
			flex-direction: row;
			margin-top: 1em;
			gap: 1em;

			.nelio-content-text-field-control {
				flex-grow: 1;
			}
		}

		&-add-button {
			float: right;
			height: auto;
			padding: 0;
			outline: none !important;
			box-shadow: none !important;
			min-width: auto !important;
			margin-bottom: 0.3em;

			:focus {
				box-shadow: inset 0 0 0 transparent !important;
			}
		}

		&-remove-button {
			padding: 0 !important;
			height: 2em;
			outline: none !important;
			box-shadow: none !important;
			min-width: auto !important;
			margin-bottom: 0.5em;
			align-self: flex-end;

			:focus {
				box-shadow: inset 0 0 0 transparent !important;
			}
		}
	}
}