.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 {
  @apply flex
    items-center
    pt-px;
}

.ads-TableHeaderCell-ChildrenWrapper {
  @apply flex
    items-center
    justify-between
    flex-grow
    leading-none;
}

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

.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-iconButton:focus {
  @apply outline-none
    shadow-focus;
}

.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-closeFilter:focus {
  @apply outline-none
    shadow-focus;
}

.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;
}

.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;

  left: 56px;
}

.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.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) {
  @apply z-20;
}