celestin-editable {
    width: calc(100% - 2em);
}
.editableContainer {
    display: flex;
    align-items: center;

    &:not(.editing) {
        display: inline;

        .editingText, .editableSave {
            display: none;
        }
    }

    &.editing {
        .editableText {
            display: none;
        }

        .editingText {
            display: block;
        }

        .editableSave {
            display: inline;
        }
    }
}

.editableText {
    white-space: pre-wrap;
    opacity: 0.85;

    &:hover {
        cursor: pointer;
        opacity: 1;
    }
}

.editableSave {
    opacity: 0.5;
    position: relative;
    left: -1.5em;

    &:hover {
        cursor: pointer;
        opacity: 1;
    }
}

input.editingText, 
textarea.editingText {
    padding: 0.25em;
    height: auto;
    padding-right: 2em !important;
    font-size: 1em;
    margin: 1em 0;
}