.table {
  &.table--card-based {
    contain: layout;
    border-collapse: separate;
    box-shadow: none;
    border-spacing: 0 var(--op-space-x-small);

    thead {
      background-color: var(--op-color-neutral-plus-eight);
      color: var(--op-color-neutral-on-plus-eight-alt);
      box-shadow: none;

      tr {
        box-shadow: none;
      }
    }

    th,
    td {
      padding: var(--op-space-small);
    }

    tr {
      box-shadow: var(--op-border-all) var(--op-color-border);
      border-radius: var(--op-radius-small);
    }
  }

  &.table--pay-period-report {
    th, td {
      text-align: right;
    }

    .table__salaried {
      font-size: var(--op-font-2x-small);
      color: var(--op-color-on-background-alt);
    }

    .table__separate-above {
      box-shadow: 0 calc(var(--op-border-width-large) * -1) 0 0 var(--op-color-neutral-plus-three);
    }
  }

  &.table--quarter-report {
    th {
      text-align: right;
      font-weight: var(--op-font-weight-normal);
      font-size: var(--op-font-x-small);

      padding-block: var(--op-space-3x-small);
      padding-inline: var(--op-space-2x-small);
    }

    tr {
      &.quarter,
      &.quarter-notes {
        background-color: var(--op-color-neutral-plus-six);
        color: var(--op-color-neutral-on-plus-six);
        box-shadow: none;
      }
    }

    td {
      text-align: right;

      &.month {
        background-color: var(--op-color-alerts-notice-plus-seven);
        color: var(--op-color-alerts-notice-on-plus-seven);
      }
    }

    td:first-child {
      font-weight: var(--op-font-weight-bold);
    }
  }
}