/* ==================================
   #DATA TABLE (DRAFT)
   ================================== */

.au-c-table-wrapper {
  position: relative;
  overflow: auto;
  border: 0.1rem solid var(--au-gray-300);
  border-radius: var(--au-radius);
}

.au-c-table {
  @include au-font-size(var(--au-h6));
  display: table;
  position: relative;
  min-width: 50rem;
  width: 100%;
  border-collapse: collapse;

  thead {
    position: relative;
    width: 100%;
    z-index: var(--au-z-index-alpha);
    border: 0;
    @include au-font-size(var(--au-base), 1.2);
  }

  th,
  td {
    max-width: 55ch;
    position: relative;
  }

  th + th,
  td + td {
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 0.1rem;
      left: -0.1rem;
      top: 0;
      height: 100%;
      border-left: 0.1rem dotted var(--au-gray-300);
    }
  }
}

.au-c-table--middle {
  tbody,
  tr,
  td {
    vertical-align: middle;
  }
}

.au-c-table__header {
  background-color: var(--au-white);

  th {
    font-weight: var(--au-medium);
    text-align: left;
    white-space: nowrap;
    padding: $au-unit-small;
    border-radius: 0;
    border: 0;
    outline: 0;
    background-color: var(--au-white);
    box-shadow: inset 0 -0.2rem 0 0 var(--au-gray-300);
  }

  .au-c-table--small & th {
    padding: $au-unit-tiny;
  }
}

.au-c-table__body {
  tr {
    border-bottom: 0.1rem solid var(--au-gray-300);
    background-color: var(--au-white);
  }

  td {
    padding: $au-unit-small;
  }

  .au-c-table--small & td {
    padding: $au-unit-tiny;
  }
}

.au-c-table__footer {
  tr + tr {
    border-top: 0.1rem solid var(--au-gray-300);
  }

  tr:first-child {
    border-top: 0.2rem solid var(--au-gray-300);
  }

  tr {
    background-color: var(--au-white);
  }

  td {
    @include au-font-size(var(--au-base));
    padding: $au-unit-tiny $au-unit-small;
  }

  .au-c-table--small & td {
    padding: $au-unit-tiny;
  }
}

.au-c-table__caption {
  @include au-font-size(var(--au-h5));
  font-weight: var(--au-medium);
  text-align: left;
  padding: $au-unit-tiny $au-unit-small;
  background-color: var(--au-gray-100);
  border-bottom: 0.1rem solid var(--au-gray-300);

  .au-c-table--small & {
    padding: $au-unit-tiny;
  }
}

.au-c-data-table__clickable-row {
  cursor: pointer;

  &:hover {
    background-color: var(--au-gray-200) !important;
  }
}

.au-c-data-table__clickable-row-icon {
  color: var(--au-blue-700);
}

.au-c-data-table__detail {
  background-color: var(--au-white) !important;
  border-bottom: 0.1rem solid var(--au-divider-color) !important;

  td {
    padding-top: $au-unit !important;
    padding-bottom: $au-unit !important;
  }
}

.au-c-data-table__image {
  max-width: 44px;
  max-height: 44px;
  display: block;
}