.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-accent;
		}
	}

	.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;
    	}
    }
	}
}