alfresco-ng2-components/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss

.adf {
    &-textitem-edit-icon.mat-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
        color: var(--adf-card-view-text-color);
    }

    &-textitem-action.mat-icon-button {
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: var(--adf-card-view-text-color);
    }

    &-textitem-action:hover,
    &-textitem-action:focus {
        color: var(--theme-text-fg-color);
    }

    &-update-icon {
        padding-left: 13px;
    }

    &-textitem-readonly {
        cursor: pointer !important;

        &:hover .adf-textitem-action,
        &:focus .adf-textitem-action {
            color: var(--theme-text-fg-color);
        }
    }

    &-textitem-chip-list-container {
        margin-bottom: 25px !important;
        margin-top: 6px;

        .mat-form-field-label {
            margin-top: 6px;
        }
    }

    &-textitem-clickable {
        cursor: pointer !important;
        padding-top: 3px;

        .adf-textitem-edit-icon.mat-icon {
            line-height: 16px;
        }

        &:hover .adf-textitem-action {
            color: var(--theme-text-fg-color);
        }
    }

    &-textitem-clickable-value {
        cursor: pointer !important;
        color: var(--theme-primary-color) !important;
    }

    &-textitem-editable {
        &-controls {
            display: flex;
            align-items: center;

            mat-icon:not(.adf-button-disabled):hover {
                color: var(--theme-text-fg-color);
                cursor: pointer !important;
            }

            mat-form-field {
                width: 100%;
            }

            input:focus,
            textarea:focus {
                border: 1px solid var(--theme-accent-color-a200);
            }
        }

        &-error {
            font-size: 12px;
            padding-top: 4px;

            ul {
                margin: 0;
                padding: 0;
                list-style-type: none;

                li {
                    margin: 0;
                    padding: 0;
                }
            }
        }
    }

    &-textitem-default-value {
        color: var(--theme-text-color);
    }

    &-textitem-editable .mat-form-field-wrapper {
        margin: 0;
        padding-bottom: 0;
    }

    &-textitem-editable .mat-form-field-underline {
        display: none;
    }

    &-textitem-editable .mat-form-field-infix {
        padding: 0;
        border-top: none;
    }

    &-textitem-editable .mat-form-field-label-wrapper {
        padding-top: 2em;
        position: static;
    }

    &-textitem-editable .mat-form-field-label {
        top: 4px;
    }

    &-textitem-editable .mat-input-element {
        font-family: inherit;
        position: relative;
        padding-top: 6px;
    }

    &-textitem-editable .mat-input-element:focus {
        padding: 5px;
        left: -6px;
        top: 0;
    }

    &-textitem-editable input.mat-input-element {
        margin-bottom: 2px;
    }

    &-textitem-editable input.mat-input-element:focus {
        margin-bottom: -8px;
    }

    &-textitem-scroll {
        overflow-x: auto;
        white-space: nowrap;
        display: block;

        &::-webkit-scrollbar {
            height: 5px;
        }

        &:hover::-webkit-scrollbar-thumb {
            display: block;
            background-color: var(--adf-card-view-text-color);
            border-radius: 2px;
        }
    }

    &-textitem-multiline {
        display: block;
    }

    &-property-field .adf-property-clear-value {
        display: none;
    }

    &-property-field.adf-card-textitem-field:hover {
        .adf-textitem-edit-icon {
            display: none;
        }

        .adf-property-clear-value {
            color: var(--adf-card-view-text-color);
            display: inline;
        }

        .adf-property-clear-value:hover {
            color: var(--theme-text-fg-color);
        }
    }
}