@dataTableFontSize: 11px;

.bk-data-table {
  // TODO: this should be configured for all widgets
  font-size: @dataTableFontSize;

  input[type="checkbox"] {
    margin-left: 4px;
    margin-right: 4px;
  }

  // XXX: SlickGrid depends on the content-box model, so lets force it on all sub-elements.
  // This is needed, because frameworks, like bootstrap, can change the box model for all
  // elements. Fix SlickGrid to work with border-box model.
  * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
  }

  *:before, *:after {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
  }
}

.bk-cell-special-defaults {
  border-right-color: silver;
  border-right-style: solid;
  background: #f5f5f5;
}

.bk-cell-select {
  .bk-cell-special-defaults;
}

.bk-cell-index {
  .bk-cell-special-defaults;
  text-align: right;
  color: gray;
}

.bk-slick-row.selected .bk-cell-index {
  background-color: transparent;
}

.bk-slick-cell {
  padding-left: 4px;
  padding-right: 4px;

  &.active {
    border-style: dashed;
  }

  &.editable {
    padding-left: 0;
    padding-right: 0;
  }
}

.bk-cell-editor {
  input, select, .bk-ui-spinner {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    background: transparent;
    vertical-align: baseline;
  }

  input {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.bk-cell-editor-completion {
  font-size: @dataTableFontSize;
}
