/* Styles for the a3w-table component */

/* The sort icon stays next to the header text even when the text wraps */
.a3w-table .a3w-table__header {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-4xs);
}

.a3w-table .a3w-table__sort-icon {
  cursor: pointer;
}

/* Centred like the other cells: on the baseline the icon sits higher than the text of the row */
.a3w-table .a3w-table__icon {
  display: inline-flex;
  vertical-align: middle;
}

/* Flex drops the line box around the inline md-icon-button, which pushed it below the other icons of the row */
.a3w-table .a3w-table__actions {
  display: flex;
  align-items: center;
}

.a3w-table .a3w-table__action-icon {
  margin-right: var(--md-spacing-4xs);
  vertical-align: middle;
}

/* '.table' raises the specificity over the beyond rule that removes the header border.
   no token for the width: the border width ramp jumps from 2px to 4px */
.table.a3w-table .a3w-table__head > tr > th {
  border-bottom: 3px solid var(--md-border-brand-secondary);
  background-color: var(--md-background-primary);
  color: var(--md-content-primary);
}

.a3w-table .a3w-table__cell {
  vertical-align: middle;
}

/* no token: the spacing ramp jumps from 8px to 12px */
.a3w-table .a3w-table__checkbox {
  margin-left: 10px;
  cursor: pointer;
}

.a3w-table .a3w-table__drag-cell {
  text-align: center;
  color: var(--md-content-brand-secondary);
}

.a3w-table .a3w-table__drag-icon {
  font-size: var(--md-font-size-4);
}

/* Row shown in the drop position while dragging */
.a3w-table .a3w-table__placeholder {
  background-color: var(--md-background-secondary);
  opacity: 0.65;
}

/* The tooltip wrapper of a button cell takes the whole cell */
.a3w-table .a3w-table__button-tooltip {
  display: block;
}

.a3w-table .a3w-table__pagination {
  float: right;
}