.component.editable-string-component {
	.editable-string-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: $space-2;

		font-size: inherit;

		.editable-string {
			font-size: inherit;
		}
	}

	.edit-text-btn,  
	.apply-changes-btn,
	.cancel-changes-btn {
		@include hover_touch {
			color: $color-black;
			background: $color-warning;
		}
	}

	.apply-changes-btn {
		color: $color-warning;
	}

	.editable-string-form {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: $space-2;

		.form-group {
			max-width: 260px;
			margin: 0;

			.input {
				padding: $space-2 $space-4;
			}
		}
	}
}