/// ----------------------------------------------------------------------

/// Data Table

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'borders';
@use 'shadows';
@use 'colours';
@use 'z-index';
@use 'breakpoints';

/// -------------------
/// Data Table config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$md !default;

/// -------------------
/// Data Table selectors
/// -------------------

.datatable {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__main {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: colours.$ui-two;
  overflow: auto;
  border: borders.$ui-two;
}

/// -------------------
/// Data Table controls
/// -------------------

.datatable__controls {
  display: flex;
  background-color: white;
  padding: spacing.$md;
  border-top: borders.$ui-two;
  border-right: borders.$ui-two;
  border-left: borders.$ui-two;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;

  @media only screen and (max-width: breakpoints.$xs) {
    display: block;

    .btn,
    .input {
      width: 100%;
      margin-bottom: spacing.$sm;
    }
  }
}

/// -------------------
/// Data Table header
/// -------------------

.datatable__header {
  box-shadow: shadows.$two;
}

/// -------------------
/// Data Table header
/// -------------------

.datatable__table {
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__row {
  padding: 0;
  background-color: white;

  &:nth-of-type(odd) {
    background-color: colours.$ui-one;
  }
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__cell {
  box-sizing: border-box;
  border-left: borders.$ui-two;
  border-right: borders.$ui-two;

  &:focus {
    outline: none;
  }

  &:first-of-type {
    border-left: 0;
  }

  &:last-of-type {
    border-right: 0;
  }

  .datatable__header & {
    position: sticky;
    top: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    padding: spacing.$md spacing.$lg spacing.$md spacing.$sm;
    box-shadow: inset 0 -1px 0 colours.$ui-two;
    text-overflow: ellipsis;
    background-color: white;
    z-index: z-index.$datatable;
    vertical-align: middle;
  }

  &--resizable {
    resize: horizontal;
  }

  &--centered {
    text-align: center;
  }
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__cell-btn {
  .datatable__header & {
    @include lib.utilities-center-y;
    right: 0;
    vertical-align: middle;
  }
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__input.input,
.datatable__input .select__input,
.datatable__input .input {
  border-color: transparent;
  background-color: transparent;
  border-radius: 0;
}

.datatable__input.checkbox {
  width: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/// -------------------
/// Data Table selectors
/// -------------------

.datatable__footer {
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  padding: spacing.$md;
  border-right: borders.$ui-two;
  border-left: borders.$ui-two;
  border-bottom: borders.$ui-two;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
