.bk-root {
  @dataTableFontSize: 11px;

  .bk-data-table {
    // XXX: SlickGrid depends on the content-box model.
    box-sizing: content-box;

    // TODO: this should be configured for all widgets
    font-size: @dataTableFontSize;

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

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

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

  .slick-cell.bk-cell-index {
    .bk-cell-special-defaults;
    text-align: right;
    background: #f0f0f0;
    color: #909090;
  }

  .bk-header-index {
    .slick-column-name {
      float: right;
    }
  }

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

  .slick-row.odd {
    background: #f0f0f0;
  }

  .slick-cell {
    padding-left: 4px;
    padding-right: 4px;
    border-right-color: transparent;
    border: 0.25px solid transparent;

    .bk {
      line-height: inherit;
    }

    &.active {
      border-style: dashed;
    }

    &.selected {
      background-color: #F0F8FF;
    }

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

  .bk-cell-editor {
    display: contents;
  }

  .bk-cell-editor {
    input, select {
      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;
  }
}
