:host {
  --data-table-font-size: var(--font-size);

  // None of these colors are defined in base.less, and none of the colors that
  // are already defined in base.less look like good substitutes for these
  // colors. Furthermore, this .less file does not fully customize all of the
  // SlickGrid colors. So, for example, if we change `--selected` to match one of
  // the colors already defined in base.less (for example, `--active-bg`), then
  // that hue of blue no longer matches the hue of blue used in other ways in
  // SlickGrid (for example, the dropdown caret for a sortable column).
  --special: #f5f5f5;
  --odd: #f0f0f0;
  --muted-text: #909090;
  --selected: #f0f8ff;
}

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

  width: 100%;
  height: 100%;

  font-size: var(--data-table-font-size);

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

.bk-cell-special-defaults {
  border-right-color: var(--border-color);
  border-right-style: solid;
  background: var(--special);
}

// TODO: remove this block? is this selector used anywhere?
.bk-cell-select {
  .bk-cell-special-defaults;
}

.slick-cell.bk-cell-index {
  .bk-cell-special-defaults;
  text-align: right;
  background: var(--odd);
  color: var(--muted-text);
}

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

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

.slick-row.odd {
  background: var(--odd);
}

.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: var(--selected);
  }

  &.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: var(--data-table-font-size);
}
