.ncl-key-value-input {
    .input-wrapper {
        width: 100%;
        display: flex;
        background-color: @white;
        position: relative;

        .check-row {
            width: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .three-dot-menu {
            position: absolute;
            right: 10px;
            top: 8px;
            width: 20px;
            visibility: hidden;
        }

        .igz-action-panel {
            visibility: hidden;
            transition: unset;

            .igz-action-item {
                margin: 0 0 0 5px;
            }
        }

        &:hover {
            .three-dot-menu, .igz-action-panel {
                visibility: visible;
            }
        }

        .inputs-container {
            width: calc(100% - 30px);
            display: flex;

            &.use-checkbox {
                width: calc(100% - 58px);
            }

            .validating-input-field {
                .input-field {
                    border-radius: 0;

                    &:not(.with-icon) {
                        padding-left: 17px;
                    }
                }

                .input-placeholder {
                    left: 18px;
                    font-style: italic;
                }
            }

            .input-container {
                width: 29%;
                display: flex;
                align-items: center;

                label {
                    width: 130px;
                    padding-right: 7px;
                    text-align: right;
                    margin-bottom: 0;
                }
            }

            .input-key-wrapper {
                width: 29%;

                .key-label {
                    width: 45px;
                }

                .input-key {
                    flex-grow: 1;
                }

                &.all-value-types {
                    width: 40%;
                }

                &:not(.use-type) {
                    width: 38%;

                    .validating-input-field {
                        .input-field {
                            &[readonly]:focus, &:not(:focus) {
                                border-right: none;
                            }

                            &.invalid {
                                border: 1px solid @darkish-pink;
                            }
                        }
                    }

                    .default-dropdown {
                        .default-dropdown-field {
                            background-color: @white;
                            border-radius: 0;
                        }

                        .default-dropdown-container {
                            z-index: 100;
                        }
                    }
                }
            }

            .input-value-wrapper {
                width: 29%;

                .input-value {
                    flex-grow: 1;
                }

                .input-additional-value {
                    flex-grow: 1;

                    .validating-input-field {
                        .input-field {
                            &[readonly]:focus, &:not(:focus) {
                                border-left: none;
                            }

                            &.invalid {
                                border: 1px solid @darkish-pink;
                            }
                        }
                    }
                }

                &.only-key-value-input {
                    width: 62%;
                }

                &.only-key-value-input.use-type {
                    width: 58%;
                }

                &.only-value-input {
                    width: 100%;
                }

                &.all-value-types {
                    width: 40%;

                    label {
                        width: 65px;
                    }
                }
            }

            .input-value-key-wrapper {
                width: 29%;

                .input-value-key {
                    flex-grow: 1;
                }

                &:not(.use-type) {
                    width: 61%;
                }
            }

            .input-type-wrapper {
                width: 13%;

                .type-label {
                    width: 60px;
                    padding-left: 7px;
                }

                &.all-value-types {
                    width: 20%;
                }

                .input-type {
                    flex-grow: 1;

                    .default-dropdown {
                        .default-dropdown-field {
                            background-color: @white;
                            border-radius: 0;
                        }

                        .default-dropdown-container {
                            z-index: 100;
                        }
                    }
                }
            }
        }
    }
}