.container {
  @apply relative overflow-x-auto lg:overflow-x-visible;
}

.line {
  @apply absolute top-0 w-full border-t border-stone-100 h-2;
}

.topPadding {
  @apply pt-4;
}

.infiniteScrollContainer {
  @apply overflow-auto lg:overflow-visible hidden lg:block;
}

.mobileTable {
  @apply overflow-x-auto pb-4;

  @screen lg {
    @apply hidden;
  }
}

.diffTable {
  @apply leading-loose text-sm font-mono border-separate z-1 pt-2 pr-10 border-stone-100 overflow-hidden pb-4 lg:pb-40;
  border-spacing: 0;

  th {
    @apply font-bold max-w-full whitespace-nowrap;
  }
  th,
  td {
    @apply pr-8 pl-2 border-b border-stone-100 relative;

    &:first-of-type {
      @apply min-w-0;
    }
  }
  thead {
    @apply text-left text-primary;
  }
  tbody {
    @apply whitespace-nowrap text-storm-200 relative;

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

.noChanges {
  @apply pt-5;
}

.forDocs {
  @apply relative;
}

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

.diffTableColsHidden {
  @apply pt-[4.5rem];
}

.cell {
  @apply text-storm-200 min-w-[130px] max-w-[400px];
}

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

.isNull {
  @apply text-stone-300;
}

.dropdownButton {
  @apply hidden;
}

.clicked .dropdownButton,
.cell:hover .dropdownButton,
.headCell:hover .dropdownButton {
  @screen md {
    @apply block absolute right-2 top-[0.35rem];
  }
}

.clicked:hover,
.headCell:hover,
.clicked:focus-within {
  @apply bg-stone-50;
}

.minus {
  @apply text-red-400 text-right;
}
.deleted {
  @apply text-red-400;
}

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

.toTop {
  @apply fixed bottom-4 right-8 px-2;
}

.noBorder {
  @apply border-b-0;
}

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

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

.hiddenContainer {
  @apply mb-3 pt-3 absolute w-full inline-flex items-center;

  ol {
    @apply flex overflow-x-scroll mx-1 h-[3.5rem] px-2;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      @apply hidden;
    }
  }
}

.hiddenLabel {
  @apply inline-block whitespace-nowrap text-sm;
}

.hiddenCol {
  @apply bg-stone-50 rounded mx-[.2rem] my-[.6rem] pl-2 border border-stone-100 inline-flex items-center;

  &:hover {
    @apply bg-stone-50;
  }

  button {
    @apply mx-2;

    svg {
      @apply inline-block mb-0.5;
    }
  }
}

.topContainer {
  @apply absolute mb-6 right-2 ml-14 hidden -top-20;

  @screen lg {
    @apply flex items-center -top-10;
  }

  a {
    @apply mt-0.5;
  }
}

.filterLabel {
  @apply font-normal ml-4;
}

.filterSelect {
  @apply w-36;
}

.err {
  @apply pt-0 mb-4;
}

.dot {
  @apply px-1 pt-1;
}

.icon {
  @apply inline-block opacity-50;
}

.space {
  @apply mt-1.5;
}

.marX {
  @apply mx-0.5;
}

.optionButton {
  @apply hidden;
  @media (min-width: 850px) {
    @apply flex justify-end mt-0.5;
  }
}

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

.rowDropdownButton {
  @apply hidden;
  @screen md {
    @apply invisible mx-2 flex;
  }
}

.clicked .rowDropdownButton,
.addedRow:hover .rowDropdownButton {
  @apply visible;
}

.rowDropdown {
  @apply top-[1.8rem] -right-16;
}

.deletedRow:hover {
  @apply visible rounded-full text-stone-500 bg-opacity-50 bg-red-50;
}

.addedRow:hover {
  @apply visible rounded-full bg-opacity-50 text-stone-500 bg-green-50;
}

.firstCell {
  @apply flex items-center relative;
}
