@editable-grid-combobox-toggle-size: 28px;
@editable-grid-input-active-color: @theme-green1;

//Editable grid

//Border radius fixes - use radius if its not active
.data-grid__footer .data-grid__row:last-of-type .data-grid__cell:last-of-type,
.data-grid__body .data-grid__row:last-of-type .data-grid__cell:last-of-type {
    .form-element--blend-with-grid {
        border-bottom-right-radius: @border-radius-default;
    }
}

.data-grid__footer .data-grid__row:last-of-type .data-grid__cell:first-of-type,
.data-grid__body .data-grid__row:last-of-type .data-grid__cell:first-of-type {
    .form-element--blend-with-grid {
        border-bottom-left-radius: @border-radius-default;
    }
}

.data-grid__body--with-remove-column > .data-grid__row:last-of-type > .data-grid__cell:nth-last-child(2) {
    .form-element--blend-with-grid {
        border-bottom-right-radius: @border-radius-default;
    }
}

//No border-radius if it has footer under body
.data-grid__body.data-grid__body--no-border-radius .data-grid__row:last-of-type {
    .data-grid__cell:first-of-type {
        .form-element--blend-with-grid{
            border-bottom-left-radius: 0;
        }
    }
    .data-grid__cell:last-of-type {
        .form-element--blend-with-grid {
            border-bottom-right-radius: 0;
        }
    }
}

.data-grid__body--no-border-radius.data-grid__body--with-remove-column > .data-grid__row:last-of-type > .data-grid__cell:nth-last-child(2) {
    .form-element--blend-with-grid {
        border-bottom-right-radius: 0;
    }
}

// Various input components within an editing cell
// -------------------
.data-grid__cell.data-grid__cell--editing-cell {
    //form element (text inputs)
    .form-element--blend-with-grid {
        width: 100%;
        margin: 0;
        padding: 0 15px;
        border: 0;
        display: inline-block !important;

        &:hover,
        &:focus,
        &:active {
            border-radius: 0 !important;
        }

        &:disabled {
            border-radius: 0;
            background-color: @theme-grey11;
            &:hover {
                border: 0;
            }
        }

        &.form-element--has-error,
        &.form-element--has-error:invalid {
            border: 1px solid @color-error !important;
            border-radius: 0 !important;
        }

        //restore border on hover and focus
        &:hover {
            border: 1px solid @color-border-input-hover;
        }
        &:focus {
            border: 1px solid @editable-grid-input-active-color;
            box-shadow: none;
        }

        &.error { //ASPX
            border: 1px solid @color-error;
            border-radius: 0 !important;

            &:focus,
            &:hover {
                border: 1px solid @color-error;
            }
        }

        //Popup have small grids that shifts because of border on hover
        &.form-element--blend-with-grid-hidden-border {
            border: 1px solid transparent;
            &:hover {
                border-color: @color-border-input-hover;
            }
            &:focus,
            &:active {
                border-color: @color-border-input-focus;
            }
        }

        &.form-element__input--no-padding-on-focus {
            &:focus,
            &:active {
                padding: 0;
            }
        }
    }

    .form-element--blend-with-grid-small-padding {
        padding: 0 10px;
    }

    .form-element--blend-with-grid-auto-width {
        width: auto;
    }

    //Combobox in grid
    .combobox--blend-with-grid {
        &:hover {
            .selectize-input {
                border: 1px solid @color-border-input-hover;
            }
        }

        .plugin-item_nowrap.selectize-control.single .selectize-input.focus.input-active .item-wrap-outer {
            right: @editable-grid-combobox-toggle-size;
        }
        .plugin-item_nowrap.selectize-control.single .selectize-input .item-wrap-outer {
            right: 0;
        }
    }

    //Combobox in grid in a popup (tableflip)
    .combobox--blend-with-grid-in-popup {
        width: calc(~"100% - 27px");

        .combobox__control-wrapper {
            .form-element__input--combobox {
                border: none;
                border-radius: 0;
                width: 100% !important;
                text-overflow: ellipsis;
                padding: 10px 5px;

                &:hover {
                    border: 1px solid @color-border-input-hover;
                }
                &:focus {
                    border: 1px solid @color-border-input-focus;
                }
            }

            .combobox__dropdown-toggle--popup-combobox {
                border-radius: 0;
                border-top: 0;
                border-right: 0;
                border-bottom: 0;

                &:focus,
                &:hover{
                    border: 1px solid @color-border-input-focus;
                }
            }
        }
    }

    //Dropdown in grid
    .dropdown__control--in-grid {
        border: 0; //No border when just viewing
        border-radius: 0;
        padding-left: 15px;

        //Reapply border in various state
        &:hover {
            border: 1px solid @color-border-input-hover;
        }

        &:active,
        &:focus {
            border: 1px solid @editable-grid-input-active-color;
        }

        &.dropdown__control--disabled {
            &:hover,
            &:active {
                border: 1px solid @color-border-input;
            }
        }

        &.dropdown__control--has-error {
            border: 1px solid @color-error;

            &:hover,
            &:focus {
                border: 1px solid @color-error;
            }
        }
    }

    //Datepicker
    .form-element__datepicker--blend-with-grid {
        border: 0;
        border-radius: 0;
        padding-left: 15px;

        &:focus {
            border: 1px solid @editable-grid-input-active-color;

            & + .ui-datepicker-trigger {
                border-color: @editable-grid-input-active-color;
                &:hover {
                    border-color: @editable-grid-input-active-color;
                }
            }
        }

        & + .ui-datepicker-trigger {
            border-radius: 0;
            border-color: transparent;
            border-left-color: @color-border-input;

            &:hover {
                border-color: @color-border-input-hover;
            }
        }
    }

    //Datepicker in error state
    .form-element__datepicker--blend-with-grid.form-element--has-error  {
        border: 1px solid @color-error;
        &:focus {
            border-color: @color-error;

            & + .ui-datepicker-trigger {
                border-color: @color-error;
                &:hover {
                    border-color: @color-error;
                }
            }
        }

        & + .ui-datepicker-trigger {
            border-color: @color-error;

            &:hover {
                border-color: @color-error;
            }
        }

    }

    //some grid have irregular height (wrapping text), this makes datepicker uses full height
    .datePickerHolderLegacy--full-height {
        display: block;
        height: 100%;

        .form-element__datepicker--blend-with-grid {
            height: 100%;
            border: 1px solid transparent;
            &:active,
            &:focus {
                border-color: @editable-grid-input-active-color;
            }
            &:hover {
                border-color: @color-border-input-hover;

                & + .ui-datepicker-trigger {
                    border-color: @color-border-input-hover;
                }
            }
        }
        .ui-datepicker-trigger {
            height: calc(~"100%");
            &:before {
                height: 100%
            }
        }
    }

    //Datepicker hover effect
    .datepicker__container {
        &:hover {
            .form-element__datepicker--blend-with-grid {
                border: 1px solid @color-border-input-hover;

                & + .ui-datepicker-trigger {
                    border-color:  @color-border-input-hover;
                }
            }
            .form-element__datepicker--blend-with-grid.form-element--has-error {
                border-color: @color-error;

                & + .ui-datepicker-trigger {
                    border-color:  @color-error;
                }
            }
        }
    }

    //ASPX legacy editable grids
    .errorSpan {
        height: 100%;
        label.error {
            height: auto;
        }
    }
}