.ads-Table {
  /**
   * Sticky table headers require non-default border spacing and
   * collapse. Without this change, sticky table header borders
   * disappear on scroll.
   */
  border-collapse: separate;
  border-spacing: 0;

  @apply bg-white
    w-full
    relative;

  font-size: 13px;
}

.ads-Table:not(.ads-Table--outer-border) {
  @apply border-solid
    border-gray-400
    border-b;
}

/* HeaderCell */
.ads-TableHeaderCell {
  @apply text-left
    text-h5
    border-b
    border-solid
    border-gray-400
    font-medium
    bg-gray-300
    px-2
    py-0
    h-cell
    z-20;
}

.ads-TableHeaderCell:not(.ads-TableHeaderCell--removeVerticalPadding) {
  @apply py-1;
}

.ads-Table--affix-header .ads-TableHeaderCell {
  @apply sticky
    border-gray-400
    border-solid
    top-0;

  z-index: 19;
}

.ads-TableHeaderCell:not(:first-of-type),
.ads-TableCell:not(:first-of-type) {
  @apply border-l;
}

.ads-TableHeaderCell--shrinkToContent {
  @apply whitespace-nowrap;
  width: 1%;
}

.ads-TableHeaderCell-InnerWrapper,
.ads-TableHeaderCell-ChildrenWrapper {
  @apply flex
    items-center;
}

.ads-TableHeaderCell-InnerWrapper {
  @apply pt-px
    h-full;
}

.ads-TableHeaderCell-ChildrenWrapper {
  @apply leading-none;
}

.ads-TableHeaderCell-iconButtonWrapper {
  @apply flex;
}

.ads-TableHeaderCell-iconButton {
  @apply w-5
    h-5
    rounded-sm
    bg-transparent
    flex
    justify-center
    ml-px
    duration-100
    text-iconSm
    text-gray-700
    items-center;
}

.ads-TableHeaderCell-iconButton:hover,
.ads-TableHeaderCell-iconButton:active,
.ads-TableHeaderCell-iconButton:focus {
  @apply bg-gray-400;
}

.ads-TableHeaderCell-filterIcon.isActive {
  @apply text-blue-400;
}

.ads-TableHeaderCell-filterMenu {
  @apply w-56
    z-dropdown;
}

.ads-TableHeaderCell-filterMenu.hasControls {
  @apply w-auto;
}

.ads-TableHeaderCell-filterMenuHeader {
  @apply my-2
    ml-3
    mr-2
    items-center;
}

.ads-TableHeaderCell-filterMenuInput {
  @apply mx-3
    mb-1;
}

.ads-TableHeaderCell-filterMenuLinksWrapper {
  @apply mx-3
    mb-2
    justify-end;
}

.ads-TableHeaderCell-filterMenuLink,
.ads-TableHeaderCell-filterMenuLinkDivider {
  @apply ml-1;
}

.ads-TableHeaderCell-filtersScroller {
  @apply overflow-y-scroll
    break-all
    border-t;

  max-height: 200px;
}

.ads-TableHeaderCell-filterMenu.hasControls
  .ads-TableHeaderCell-filtersScroller {
  max-height: none;
}

.ads-TableHeaderCell-filtersWrapper {
  @apply px-3
    pt-2;
}

.ads-TableHeaderCell-filtersWrapper > * {
  @apply mb-2;
}

.ads-TableHeaderCell-closeFilter {
  @apply w-4
    h-4
    ml-auto
    text-gray-700
    justify-center
    rounded-sm;
}

.ads-TableHeaderCell-closeFilter:hover,
.ads-TableHeaderCell-closeFilter:active,
.ads-TableHeaderCell-closeFilter:focus {
  @apply text-gray-600;
}

.ads-TableHeaderCell-sortIcon {
  @apply opacity-25;
}

.ads-TableHeaderCell-sortIcon.isActive {
  @apply opacity-100;
}

/* TableCell */
.ads-TableCell {
  @apply text-left
    bg-white
    border-t
    border-solid
    border-gray-200
    h-cell;

  line-height: 18px;
}

.ads-TableRow:first-of-type .ads-TableCell,
.ads-TableCell:only-child {
  @apply border-t-0;
}

.ads-TableRow--selected > .ads-TableCell {
  @apply bg-blue-0
    border-gray-400;
}

.ads-TableBody .ads-TableRow:not(.ads-TableRow--selected):hover .ads-TableCell {
  @apply bg-gray-100;
  transition: background-color 300ms ease;
}

.ads-TableCell:not(.ads-TableCell--removePadding) {
  @apply px-2
    py-1;
}

/* TableRow */
.ads-TableRow:not(:last-of-type) {
  @apply border-b
    border-solid
    border-gray-400;
}

/* Table with outer border */
.ads-Table--outer-border .ads-TableHeaderCell,
.ads-Table--outer-border .ads-TableCell {
  @apply border-t;
}

.ads-Table--outer-border .ads-TableHeaderCell:last-of-type,
.ads-Table--outer-border .ads-TableBody .ads-TableCell:last-of-type {
  @apply border-r;
}

.ads-Table--outer-border .ads-TableRow .ads-TableCell:first-child {
  @apply border-l;
}

.ads-Table--outer-border .ads-TableRow:last-of-type .ads-TableCell {
  @apply border-b;
}

/* No results */

.ads-Table--no-results {
  @apply mb-10;
}

.ads-Table--no-results .ads-TableBody {
  @apply absolute
    border-b
    border-gray-400
    bg-white
    block
    w-full;
}

.ads-Table--no-results .ads-TableBody .ads-TableCell {
  @apply text-gray-600
    border-0;
}

/**
 * Sticky Column
 * These work by using position: sticky on the first data column of the
 * table. You will need to apply a column width to both the table head
 * cell and the table cell.
*/
.ads-Table.ads-Table--sticky-column.ads-TableCell {
  min-width: 200px;
}

.ads-Table.ads-Table--sticky-column .ads-TableCell:first-of-type,
.ads-Table.ads-Table--sticky-column .ads-TableHeaderCell:first-of-type {
  @apply sticky
    left-0
    z-10;
}

.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableCell:nth-of-type(2),
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2) {
  @apply sticky
    z-10;
}
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableCell:nth-of-type(2),
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2) {
  left: 56px;
}
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions.ads-Table--shrink-first-column
  .ads-TableCell:nth-of-type(2),
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions.ads-Table--shrink-first-column
  .ads-TableHeaderCell:nth-of-type(2) {
  left: 32px;
}

.ads-TableCell:first-of-type:not(:only-child),
.ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--batch-actions .ads-TableCell:first-of-type,
.ads-Table.ads-Table--batch-actions .ads-TableHeaderCell:first-of-type {
  @apply pl-8;
}

.ads-Table--shrink-first-column .ads-TableCell:first-of-type:not(:only-child),
.ads-Table--shrink-first-column .ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--batch-actions.ads-Table--shrink-first-column
  .ads-TableCell:first-of-type,
.ads-Table.ads-Table--batch-actions.ads-Table--shrink-first-column
  .ads-TableHeaderCell:first-of-type {
  @apply pl-2;
}

.ads-Table.ads-Table--sticky-column .ads-TableCell:first-of-type,
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableCell:nth-of-type(2) {
  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px 0 0 rgba(0, 0, 0, 0.04);
}

.ads-Table.ads-Table--sticky-column .ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2) {
  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px -1px 0 rgb(234, 237, 239);
}

.ads-Table.ads-Table--sticky-column .ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2),
.ads-Table.ads-Table--sticky-column.ads-Table--batch-actions.ads-Table--shrink-first-column
  .ads-TableHeaderCell:nth-of-type(2) {
  @apply z-20;
}

/**
 * Space Rows
 *
*/

.ads-Table.ads-Table--space-rows {
  @apply bg-transparent;

  border-spacing: 0 4px;
}

.ads-Table.ads-Table--space-rows:not(.ads-Table--outer-border) {
  @apply border-b-0;
}

.ads-Table.ads-Table--space-rows .ads-TableHeaderCell {
  @apply border-t
    border-l-0
    border-r-0
    h-10;
}

.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:first-of-type {
  @apply border-l;
}

.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:last-of-type {
  @apply border-r;
}

.ads-Table.ads-Table--space-rows .ads-TableCell {
  @apply border-gray-400
    border-t
    border-b
    border-l-0
    border-r-0
    h-14;
}

.ads-Table.ads-Table--space-rows .ads-TableCell:first-of-type {
  @apply border-l;
}

.ads-Table.ads-Table--space-rows .ads-TableCell:last-of-type {
  @apply border-r;
}

.ads-Table.ads-Table--space-rows .ads-TableRow:first-of-type .ads-TableCell,
.ads-Table.ads-Table--space-rows .ads-TableCell:only-child {
  @apply border-t;
}

.ads-Table.ads-Table--space-rows .ads-TableRow:not(:last-of-type) {
  @apply border-b-0;
}

.ads-Table.ads-Table--space-rows.ads-TableCell:first-of-type:not(:only-child),
.ads-Table.ads-Table--space-rows.ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
  .ads-TableCell:first-of-type,
.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
  .ads-TableHeaderCell:first-of-type {
  @apply pl-5;
}

.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableCell:nth-of-type(2),
.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2) {
  left: 44px;
}

.ads-Table.ads-Table--space-rows.ads-Table--sticky-column
  .ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
  .ads-TableHeaderCell:nth-of-type(2) {
  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px 0 0 rgb(234, 237, 239);
}

/* Enable grid sizing */

.ads-Table.ads-Table--grid-sizing {
  --table-cell-height: theme("height.cell");

  @apply grid
    border-b-0
    flex-1
    w-auto
    min-w-full;

  grid-auto-rows: minmax(var(--table-cell-height), auto);
}

.ads-Table.ads-Table--grid-sizing .ads-TableHead,
.ads-Table.ads-Table--grid-sizing .ads-TableBody,
.ads-Table.ads-Table--grid-sizing .ads-TableRow {
  display: contents;
}

.ads-Table.ads-Table--grid-sizing .ads-TableCell {
  @apply h-auto
    border-b
    border-t-0;
}

.ads-Table.ads-Table--grid-sizing .ads-TableRow:last-of-type .ads-TableCell {
  border-bottom-color: theme("colors.gray.400");
}

.ads-Table.ads-Table--grid-sizing
  .ads-TableCell:not(.ads-TableCell--removePadding) {
  @apply px-2;

  padding-bottom: 5px;
  padding-top: 5px;
}

.ads-Table.ads-Table--grid-sizing .ads-TableCell:first-of-type:not(:only-child),
.ads-Table.ads-Table--grid-sizing .ads-TableHeaderCell:first-of-type,
.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
  .ads-TableCell:first-of-type,
.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
  .ads-TableHeaderCell:first-of-type {
  @apply pl-8;
}