@import '../../../mixins/box-sizing';

:host(.tds-table__row) {
  @include tds-box-sizing;

  display: table-row;
  border-bottom: 1px solid var(--tds-table-divider);
  background-color: var(--tds-table-body-row-background);
  transition: background-color 200ms ease;
  color: var(--tds-table-color);

  .tds-table__body-cell--checkbox {
    min-width: 48px;
    width: 48px;
    padding: 0;
  }
}

:host(.tds-table__row:hover) {
  background-color: var(--tds-table-body-row-background-hover);
}

:host(.tds-table__row--selected) {
  background-color: var(--tds-table-body-row-background-selected);
}

:host(.tds-table__row--selected:hover) {
  background-color: var(--tds-table-body-row-background-selected-hover);
}

:host(.tds-table__row--hidden) {
  display: none;
}

:host(.tds-table__row--expended) {
  width: 100%;
  background-color: pink;
}

:host {
  // Extra rule for label use in table
  .tds-form-label--table {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}

:host(.tds-table__compact) {
  .tds-form-label--table {
    height: 32px;
  }
}

:host(.tds-table--divider) {
  .tds-table__body-cell--checkbox {
    border-right: 1px solid var(--tds-table-divider);
  }
}

:host(.tds-table__row--clickable) {
  cursor: pointer;
}

:host(.tds-table__row--clickable:focus-visible) {
  outline: var(--focus-outline, 2px solid blue);
}