:host {
  display: flex;
  /* display: -webkit-box; */
  border-bottom: 1px solid var(--color-border);
  padding: var(--row-padding);
  background: var(--color-elevated-item-background);
  transition: background-color .2s;
  margin: var(--row-margin);
}

:host:hover {
  background: var(--color-background-primary);
}

/* rounds the top corners of the first row if the table doesn't have any header */
:not(dvn-table-header + dvn-table-body) > :host:first-child {
  border-top-right-radius: var(--corner-radius);
  border-top-left-radius: var(--corner-radius);
}

/* rounds the bottom corners of last row */
:host:last-of-type {
  border-bottom-right-radius: var(--corner-radius);
  border-bottom-left-radius: var(--corner-radius);
}

/* Scale */
:host.small {
  --row-padding: calc(2 * var(--spacing-unit)) calc(1 * var(--spacing-unit));
}

:host.medium {
  --row-padding: calc(3 * var(--spacing-unit)) calc(2 * var(--spacing-unit));
}

:host.large {
  --row-padding: calc(4 * var(--spacing-unit)) calc(3 * var(--spacing-unit));
}

:host.no-spacing {
  --row-padding: 0;
}

/* separation */
:host.separated-0 {
}

:host.separated-1, :host.separated-2, :host.separated-3 {
  border-radius: var(--corner-radius);
  border-bottom: none;
}

:host.separated-0:hover, :host.separated-1:hover, :host.separated-2:hover, :host.separated-3:hover {
  background: var(--color-elevated-item-background);
}

:host.separated-1 {
  --row-margin: calc(1 * var(--spacing-unit)) 0;
}

:host.separated-2 {
  --row-margin: calc(2 * var(--spacing-unit)) 0;
}

:host.separated-3 {
  --row-margin: calc(3 * var(--spacing-unit)) 0;
}

:host.separated:first-child {
  margin-top: 0;
}

/* elevation */
:host.elevated-0 {
}

:host.elevated-1 {
  box-shadow: 0 1px 4px rgba(var(--color-elevated-item-shadow), 0.03);
}

:host.elevated-2 {
  box-shadow: 0 2px 6px rgba(var(--color-elevated-item-shadow), 0.08);
}

:host.elevated-3 {
  box-shadow: 0 2px 8px rgba(var(--color-elevated-item-shadow), 0.05);
}
