:host {
  display: contents;

  /* Note that the px unit is required in Safari for the calc to work */
  &(:first-of-type) {
    --ld-table-selection-wrapper-border-width-top: 0px;
  }
  &(:last-of-type) {
    --ld-table-selection-wrapper-border-width-bottom: 0px;
  }

  --ld-table-selection-wrapper-gradient: linear-gradient(
    to top,
    var(--ld-table-border-col),
    var(--ld-table-border-col)
      var(--ld-table-selection-wrapper-border-width-bottom),
    var(--ld-table-bg-col) var(--ld-table-selection-wrapper-border-width-bottom),
    var(--ld-table-bg-col),
    var(--ld-table-bg-col),
    var(--ld-table-bg-col)
      calc(100% - var(--ld-table-selection-wrapper-border-width-top)),
    var(--ld-table-border-col)
      calc(100% - var(--ld-table-selection-wrapper-border-width-top)),
    var(--ld-table-border-col) 100%
  );
}

tr {
  background-color: inherit;
  outline: var(--ld-table-row-outline-half);
}

.ld-table__selection-wrapper {
  vertical-align: middle;
  align-items: center;
  background: var(--ld-table-selection-wrapper-gradient);
  display: flex;
  justify-content: center;
  padding-inline: var(--ld-table-cell-padding-x);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  &::after {
    content: '';
    background-color: var(--ld-table-border-col);
    position: absolute;
    right: 0;
    top: var(--ld-sp-6);
    bottom: var(--ld-sp-6);
    width: var(--ld-table-row-outline-width);
  }
}

.ld-table-row__selection-cell {
  &::part(cell) {
    min-width: 1.25rem;
    position: relative;
    z-index: 1;
  }
}

.ld-table-row__selection-cell--sticky {
  &::part(cell) {
    left: 0;
    position: sticky;
  }
}
