@import "./properties.css";

.odd {
  background-color: var(--body-tr-odd-background-color);
  border-bottom: var(--body-tr-odd-border);
}

.even {
  background-color: var(--body-tr-even-background-color);
  border-bottom: var(--body-tr-even-border);
}

.row {

  &:hover td,
  &:focus td {
    border-style: solid;
    border-color: var(--body-tr-hover-border-color);
    border-width: var(--body-tr-hover-border-width);
  }

  &:hover td:first-child,
  &:focus td:first-child {
    border-width: var(--body-tr-first-child-hover-border-width);
  }

  &:hover td:last-child,
  &:focus td:last-child {
    border-width: var(--body-tr-last-child-hover-border-width);
  }
}

.odd.hoverRow,
.even.hoverRow {

  & td,
  & td {
    border-color: var(--body-tr-hover-border-color);
    border-style: solid;
    border-width: var(--hover-row-border-width);
  }

  & td:first-child,
  & td:first-child {
    border-width: var(--hover-row-first-child-border-width);
  }

  & td:last-child,
  & td:last-child {
    border-width: var(--hover-row-last-child-border-width);
  }
}

.odd.expandedRow.hoverRow,
.even.expandedRow.hoverRow {

  & td:only-child,
  & td:only-child {
    border-color: var(--body-tr-hover-border-color);
    border-style: solid;
    border-width: var(--body-tr-expanded-hover-border-width);
  }
}

.open {
  text-align: center;
  width: var(--table-open-width);

  & * {
    margin: 0 auto;
  }
}

.open button svg {
  margin: 0 auto;
}