nts-datagrid-header {
    display: block;
    position: relative;

    .delete-cell{
        visibility: hidden;
    }

    nts-row {
        transition: 200ms ease background-color;

        &.selected {
            background-color: $color-primary-light;
            span {color: $color-primary; }
            .delete-cell{ visibility: visible; }
            & + nts-separator hr { border-color: $color-primary; }
        }
        &.deleting {
            background-color: $color-error-light;
            span {color: $color-error; }
            .delete-cell{ visibility: hidden; }
            & + nts-separator hr { border-color: $color-error; }
        }
        &.all-selected {
            &.selected { background-color: darken($color-primary-light, 5%); nts-checkbox {color: $color-primary; } }
            &.deleting { background-color: darken($color-error-light, 5%); nts-checkbox {color: $color-error; } }
        }
    }

    nts-datagrid-cell {
        font-weight: bold;
        position: relative;
        min-height: $input-height;

        span {
            color: $alpha-black;
            top: 50%;
            margin-top: - $input-height / 2;
            height: $input-height;
            position: absolute;
            line-height: $input-height;
        }

        &.deleting {
            display: flex;
            span { position: relative; flex: 1; }
            nts-button { margin-left: $basic-padding / 4; }
        }

        &.sortable{
            cursor: pointer;
            user-select: none;

            &:after {
                @include pseudo();
                background-image: url('assets/img/sort_both.png');
                background-position: center;
                background-repeat: no-repeat;
                top: 50%;
                margin-top: - $input-height / 2;
                height: $input-height;
                width: $input-height;
                right: $basic-padding / 4;
                bottom: 0;
            }
            &.sort-asc {
                span {
                    color: $black;
                }
                &:after {
                    background-image: url('assets/img/sort_asc.png');
                }
            }
            &.sort-desc {
                span {
                    color: $black;
                }
                &:after {
                    background-image: url('assets/img/sort_desc.png');
                }
            }
        }
    }
}