@import "../../styles/index";
.dnn-editable-field {
    display: block;
    width: 100%;
    float: left;
    padding: 15px 30px;
    box-sizing: border-box;
    margin-bottom: 25px;
    * {
        box-sizing: border-box;
    }
    label.editable-label {
        font-weight: bold;
        text-transform: uppercase;
        float: left;
        margin-right: 10px;
    }
    .edit-button {
        svg {
            width: 16px;
            height: 16px;
            float: left;
            cursor: pointer;
        }
    }
    span.editable-value {
        margin-top: 10px;
        display: block;
        height: auto;
        float: left;
        opacity: 1;
        width: 100%;
    }
    div.editable-input {
        transition: .5s;
        height: 0;
        display: block;
        float: left;
        width: 100%;
        position: relative;
        >div {
            width: 100%;
            pointer-events: none;
        }
        input, textarea {
            width: 100%;
            opacity: 0;
            border-radius: var(--dnn-controls-radius, 0);
            pointer-events: none;
        }
        textarea {
            height: 100%;
            padding: 8px 16px 20px;
        }
        .help-text {
            position: absolute;
            bottom: 10px;
            right: 5px;
            font-size: 13px;
            font-weight: bold;
            color: var(--dnn-color-primary, @curiousBlue);
            opacity: 0;
            transition: .2s;
            transition-delay: 0s;
            height: 0px;
        }
        .dnn-ui-common-tooltip {
            display: none;
        }
    }
    &.in-edit {
        background-color: @alabaster;
        &.textArea {
            div.editable-input {
                height: 150px;
            }
        }
        &.singleLine {
            div.editable-input {
                height: 35px;
            }
        }
        div.editable-input {
            >div {
                width: 100%;
                pointer-events: all;
            }
            input, textarea {
                opacity: 1;
                pointer-events: all;
            }
            .help-text {
                opacity: 1;
                transition: 0s;
                transition-delay: .2s;
                height: auto;
            }
        }
        span.editable-value {
            opacity: 0;
            height: 0;
        }
        .edit-button {
            svg {
                fill: @curiousBlue;
            }
        }
        .dnn-ui-common-tooltip {
            display: block !important;
        }
    }
}