// Component stylesheets from dependencies
@import '../node_modules/d2-ui/lib/css/DataTable';
@import '../node_modules/d2-ui/lib/css/Pagination';

@import '../scss/List/DetailsBox';
@import '../scss/List/List';
@import '../scss/SqlView/SqlView';
@import '../scss/ColorPickers/ColorPickers';
@import '../scss/IconPicker/IconPicker';

$html-background-color: #F3F3F3;
$data-table--background-color: #FFF;

// Basic for all
* {
  box-sizing: border-box;
}

html {
  background: $html-background-color;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

//TODO: Distribute
//list
.data-table {
  background-color: $data-table--background-color;
}

// Needed to override the inline style set by the component
// scss-lint:disable ImportantRule
.details-box-wrap .sticky {
  left: initial !important;
  margin-right: 2rem;
  margin-top: 5rem;
  width: 22%;
}

.details-box__close-button {
  cursor: pointer;
}

.data-table__rows__row__column {
  white-space: nowrap;
}

.data-table__rows__row__column:not(:first-child) {
  width: 10%;
}

.data-table__rows__row__column:last-child {
  max-width: 90px;
  min-width: initial;
}

.data-table__headers__header {
  white-space: nowrap;
}

.sortableModalHelper {
  z-index: 2000;
}
