.component-value {
    display: flex;
    flex-direction: row;
    padding: 10px 0 10px 0;
    margin-left: 14px;
    margin-right: 20px;
    position: relative;

    .component {
        width: 40%;
        margin-right: 8px;
    }

    .value {
        width: 60%;
        display: flex;

        .text {
            width: 80%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .actions {
            display: flex;
            justify-content: end;
            align-items: center;
            flex-grow: 1;

            iqser-circle-button {
                visibility: hidden;

                &.help-mode {
                    visibility: visible;
                    z-index: 600;
                }
            }

            .changes-dot {
                height: 8px;
                width: 8px;
                background-color: var(--iqser-primary);
                border-radius: 50%;
            }
        }
    }

    &.header {
        font-weight: 600;
    }

    .arrow-right {
        visibility: hidden;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) scale(0.7);
    }

    mat-icon {
        transform: scale(0.7);
    }

    &:not(.header):hover,
    &.selected {
        background-color: var(--iqser-grey-8);
        margin-left: 0;
        margin-right: 0;

        &:not(.editing) {
            cursor: pointer;
        }

        .value {
            margin-right: 20px;
        }
    }

    &:hover {
        .component {
            margin-left: 14px;
        }

        .value {
            .actions {
                iqser-circle-button {
                    visibility: visible;
                }
            }
        }
    }

    &.selected {
        border-left: 4px solid var(--iqser-primary);

        .component {
            margin-left: 10px;
        }

        .arrow-right {
            visibility: visible;
        }
    }

    &.editing {
        flex-direction: column;

        .editing-value {
            display: flex;
            margin: 10px 0 10px 22px;

            .iqser-input-group {
                margin-top: 0;

                textarea::-webkit-resizer {
                    display: none;
                }

                textarea::-moz-resizer {
                    display: none;
                }
            }

            iqser-circle-button {
                margin-top: 3px;
            }

            .draggable {
                margin-top: 7px;
                cursor: grab;
            }
        }

        .editing-actions {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            margin: 30px 10px 10px 22px;

            .right {
                margin-left: auto;
                gap: 10px;
            }
        }
    }
}

.hidden-button {
    visibility: hidden;
}

::ng-deep .add-value {
    mat-icon {
        transform: scale(2);
    }
}

::ng-deep .undo-value {
    mat-icon {
        transform: scale(1.3);
    }
}

::ng-deep .remove-value {
    mat-icon {
        transform: scale(1.2);
    }
}

.cdk-drag-preview {
    display: flex;

    .draggable {
        margin-top: 7px;
        cursor: grab;
        transform: scale(0.7);
    }
}
