.tableWrapper {
  overflow: auto hidden;
  width: 100%;
}

.table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--margin--md);

  thead {
    background-color: rgb(var(--background--neutral-low-default--light));
    border-bottom: 3px solid rgb(var(--border--blue-medium-default--light));
  }

  tfoot {
    background-color: rgb(var(--background--neutral-low-default--light));
    border-top: 3px solid rgb(var(--border--blue-medium-default--light));
  }

  td,
  th {
    padding: var(--padding--sm);
    text-align: left;
    background-clip: padding-box; //fix overlapping background over borders for Firefox
    border: 1px solid rgb(var(--border--neutral-low-default--light));
  }

  th {
    color: rgb(var(--foreground--neutral-full-default--light));
    background-color: rgb(var(--background--neutral-low-default--light));

    &:hover {
      color: rgb(var(--foreground--neutral-full-hovered--light));
    }
    .iconButton {
      margin: -0.125em;
    }
  }

  .th__overLineWrapper {
    display: flex;
    flex-flow: column;
  }

  .th__overline {
    font-weight: 400;
  }

  tbody td {
    background-color: rgb(var(--background--neutral-base-default--light));
  }

  tr:nth-child(2n) td:where(:not([style*='background-color'])) {
    background-color: rgb(var(--background--neutral-base-default--light));
    background-image: linear-gradient(
      90deg,
      rgb(var(--background--neutral-low-default--light) / var(--blend--medium--light)) 0%,
      rgb(var(--background--neutral-low-default--light) / var(--blend--medium--light)) 100%
    );
  }

  .table__hideOnMouseOut {
    visibility: hidden;
  }

  // .hide-on-mouseout is legacy selector used in current tables via AnchorButtons.php, where these buttons should also exist in different context
  tr:hover .hide-on-mouseout,
  tr:hover .table__hideOnMouseOut,
  tr:focus-within .hide-on-mouseout,
  tr:focus-within .table__hideOnMouseOut {
    visibility: visible;
  }

  // row style when moving a row
  .draggingRow() {
    position: relative;
    z-index: var(--elevation--default);
    display: table-row;
    box-shadow: var(--shadow--medium-soft--light), var(--shadow--medium-sharp--light);

    td,
    &:nth-child(2n) td {
      background-color: rgb(var(--background--blue-low-default--light));
    }
  }
  // TODO: Refactor after jQuery dragging is removed
  .tDnD_whileDrag {
    .draggingRow();
  }

  tr.table__row {
    &--hidden,
    &--muted {
      font-style: italic;
      color: rgb(var(--foreground--neutral-medium-default--light));

      a {
        color: rgb(var(--foreground--neutral-medium-default--light));
      }
    }

    &--dragging {
      .draggingRow();
    }

    &--attention td {
      font-weight: bold;
      background: rgb(var(--background--informative-low-default--light));
    }

    &--success td {
      background: rgb(var(--background--success-low-default--light));
    }

    &--alert td {
      background: rgb(var(--background--warning-low-default--light));
    }

    &--error td {
      background: rgb(var(--background--critical-low-default--light));
    }
  }

  .table__cell {
    &--sorting {
      position: relative;
      padding-right: calc(var(--padding--sm) * 2 + 6px);

      .sorting {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);

        margin: 0;
      }
    }

    &--massAction,
    &--actions,
    &--calloutActions,
    &--preview {
      width: 1%;
      text-align: center;
    }

    &--price,
    &--pricePrimary {
      width: 10%;
      text-align: right;
    }

    &--number,
    &--datetime {
      text-align: right;
    }

    &--balance {
      font-weight: 700;
      text-align: right;
    }

    &--headline {
      font-weight: bold;
      text-align: center;
      background: rgb(var(--background--neutral-low-default--light));
    }

    &--image,
    &--imageBig {
      width: 30px;

      img {
        width: inherit;
        max-width: unset;
      }
    }

    &--imageBig {
      @media @screen-sm {
        width: 170px;
      }
    }

    &--small {
      width: 10%;
    }

    &--medium {
      width: 20%;
    }

    &--large {
      width: 50%;
    }
  }

  .table__cell--attention,
  tr:nth-child(2n) .table__cell--attention {
    background-color: rgb(var(--background--informative-low-default--light));
  }

  td.table__cell {
    &--massAction,
    &--actions,
    &--calloutActions,
    &--preview,
    &--price,
    &--pricePrimary,
    &--summary {
      white-space: nowrap;
    }

    &--pricePrimary {
      font-weight: 700;
    }

    &--summary {
      font-weight: 700;
    }

    &--balanceNegative {
      color: rgb(var(--foreground--critical-high-default--light));
    }
  }

  .table__detailLink {
    display: block;
    text-decoration: none;

    * {
      text-decoration: none;
    }
  }

  // Overrides for current stuff
  // REMOVE after replacing current checkboxes
  label.std-control-label,
  #filter-form label.std-control-label {
    margin: 0;
  }

  .imagePreview {
    display: inline-block;
    width: 30px;

    &[data-zoomed-image] {
      touch-action: none;
      cursor: zoom-in;
    }
  }

  // REMOVE after replacing current inputs with validation
  .information-bubble-wrap {
    white-space: normal;
  }
}

.table__cell--stickyStart,
.table__cell--stickyEnd {
  position: sticky;
  z-index: 1;
}

.table__cell--stickyStart {
  left: 0;
}

.table__cell--stickyEnd {
  right: 0;
}

.table__cell--stickyStart::after,
.table__cell--stickyEnd::after {
  pointer-events: none;
  content: '';

  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  left: -1px;

  border-right: 1px solid rgb(var(--border--neutral-low-default--light));
  border-left: 1px solid rgb(var(--border--neutral-low-default--light));
}

.table__filterCollapsible {
  display: flex;
  flex-direction: column;
  gap: var(--gap--md);
  margin-bottom: var(--margin--sm);
}

.table__filterCollapsibleToggle {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.table__filterCollapsible--open {
  float: none;
}

.table__filterCollapsible--closed {
  float: right;
}

.table__empty {
  padding-top: 8rem;
  padding-bottom: 8rem;

  font-size: 1.25rem;
  color: rgb(var(--foreground--neutral-medium-default--light));
  text-align: center;
}