.desktopContainer {
  @apply hidden;

  @screen lg {
    @apply block py-4 bg-white;
  }
}

.containerNoTable {
  @apply lg:px-4;
}

.mobileContainer {
  @apply pt-6 pb-80;
  @screen lg {
    @apply hidden;
  }
}

.mobileNextPageButton {
  @apply m-6;
}

.loader {
  @apply text-primary py-4 px-10;
}

.dataTable {
  @apply leading-loose text-sm font-mono border-separate z-1 overflow-x-auto pr-10 relative ml-4;
  border-spacing: 0;

  @screen lg {
    @apply overflow-hidden pr-40 ml-0 pb-80;
  }

  th {
    @apply font-bold max-w-full whitespace-nowrap;
  }

  th,
  td {
    @apply h-6 border-b border-stone-100 relative pr-10 pl-8 lg:pl-2;

    &:first-of-type {
      @apply pl-0 pr-1 border-none bg-white min-w-0;
    }
  }

  thead {
    @apply text-left text-primary;
  }
  tbody {
    @apply whitespace-nowrap text-stone-500;

    &::after {
      @apply bg-white absolute left-0  h-80 bottom-0 lg:w-[10000px];
      content: "\00a0";
      z-index: -1;
    }
  }

  tr.addedRow:hover {
    @apply bg-mint-50;
  }
  tr.removedRow:hover {
    @apply bg-coral-50;
  }
  td.added:hover {
    @apply text-green-500;
  }
  tr:hover {
    @apply bg-stone-50;
  }
  .pendingRow:hover {
    @apply bg-white;
  }
  tr.workingDiffRowAdded:hover {
    @apply bg-green-100;
  }
  tr.workingDiffRowModified:hover {
    @apply bg-yellow-100;
  }
}

.tableWithDiff {
  @apply pb-40;
}

.key {
  @apply inline-block ml-2 text-storm-200 mb-0.5;
}

.added {
  @apply text-green-500;
}

.removed {
  @apply text-red-500;
}

.addedRow {
  @apply bg-green-50;
}

.removedRow {
  @apply bg-red-50/70;
}

.cell {
  @apply align-top min-w-[130px] max-w-[400px];
}

.longContent {
  @apply min-w-[300px];
  span {
    @apply whitespace-pre-wrap break-words;
  }
}

.wideCell {
  @apply max-w-[1000px];
}

.cellIsNull {
  @apply text-stone-300;
}
.cell:hover,
.active {
  @apply bg-stone-100 text-primary;

  @screen lg {
    /* Applies background color to full column on hover */
    &::after {
      @apply bg-stone-50 absolute left-0 w-full h-[10000px] -top-[5000px];
      content: "\00a0";
      z-index: -5;
    }
  }
}

.createTable {
  @apply w-full px-2 py-4 min-w-[12rem];
  @screen lg {
    @apply min-w-[20rem];
  }
  &:hover {
    @apply bg-stone-50;
  }
}

.menu {
  @apply hidden;
}

.active .menu,
.cell:hover .menu {
  @screen lg {
    @apply block absolute right-2 top-[0.35rem];
  }
}

.rowDropdown {
  @apply hidden;
  @screen lg {
    @apply invisible mx-2 flex;
  }
}

.row:hover .rowDropdown {
  @apply visible;
}

.workingDiffRowAdded {
  @apply bg-green-100;
}

.workingDiffRowModified {
  @apply bg-yellow-100;
}

.tableDropdown {
  @apply relative;
}

.primaryKey {
  @apply text-sky-900;
}

.added .cell:hover,
.added .active {
  @apply text-green-500;
}

.addedRow .cell:hover,
.addedRow .active {
  background-color: #cef7d7;
}

.removed .cell:hover,
.removed .active {
  @apply text-red-400;
}

.removedRow .cell:hover,
.removedRow .active {
  background-color: #ffd9dc;
}

.whitespaceToggle {
  /* stylelint-disable-next-line no-descending-specificity */
  th,
  tbody {
    @apply whitespace-pre;
  }
}

.right {
  @apply right-1;
}

.altRight {
  @apply right-px;
}

.pendingRow {
  @apply h-full;
}

.buttons {
  @apply h-full border-none flex items-center mt-2;
}

.tooltip {
  @apply z-10;
}

.deleteRow {
  @apply text-red-400 mx-2 cursor-pointer;
}

.submitButton {
  @apply text-xs;
}

.addRowBtn {
  @apply flex mx-2 text-storm-200;
  svg {
    @apply w-5 h-5;
  }
}
