@import "common/var";

$edit-toggle-size: 12px;
$save-button-width: 38px;
$save-button-position: calc(#{$save-button-width} + #{$space2});
$label-input-padding: calc(#{$space1} + 1px);

.c-inline-editor__form {
    width: 100% !important;
    .el-form-item {
        width: 100%;
        max-width: none;
    }

    .el-input {
        font-size: inherit;
    }

    .el-form-item__content {
        width: 100%;
        display: flex;
        position: relative;
        line-height: 0;
    }

    .el-input__inner {
        height: 100% !important;
        color: inherit !important;
        background-color: transparent !important;
        padding: $space1 $save-button-position $space1 $space1 !important;
    }

    .el-loading-spinner {
        margin-top: -21px;
    }

}

.c-inline-editor__save-button-wrapper {
    height: 100%;
    width: $save-button-position;
    position: absolute;
    right: 0;
    display: flex;
}

.c-inline-editor__save-button {
    padding: $space1;
    margin: auto $space1 auto auto;
    width: $save-button-width;
}

.c-inline-editor__label {
    margin-bottom: $space1;
    padding-left: $label-input-padding;
    font-size: .8em;
}

.c-inline-editor__text {
    display: flex;
    width: 100% !important;
    align-items: baseline;
    padding: $label-input-padding $space1 $space1 $label-input-padding;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

.c-inline-editor__text--editor-open {
    padding: 0;
    // this is included to ensure the validation error messages are shown
    overflow: inherit;
}

.c-inline-editor__display-container {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
}

.c-inline-editor__display-resizer {
    width: 0;
    overflow: hidden;
    &:before {
        content: "l";
    }
}

.c-inline-editor__display-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: $space2;
}

.c-inline-editor__toggle-edit {
    display: inline-flex;
    flex: 0 1 auto;
}

.c-inline-editor__toggle-edit-icon {
    height: $edit-toggle-size !important;
    width: $edit-toggle-size !important;
    color: $color-gray--030;
    cursor: pointer;
    transition: .12s color;
    &:hover {
        color: $color-gray--050;
    }
}