/* docara-shell-source: runtime/utility/table/default/css/default.css */
@layer sf.utilities {
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .table {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .table {
    text-align: left;
    }
  }
  .table:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .table {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .table {
    text-align: right;
    }
  }
  .table:where(:dir(rtl)) {
    text-align: right;
  }
  .table {
    --sf-table-color: var(--sf-on-surface);
    --sf-table-border-color: var(--sf-outline-variant);
    --sf-table-accent-bg: rgba(0, 0, 0, 0);
    --sf-table-stripe-color: var(--sf-on-surface);
    --sf-table-stripe-bg: var(--sf-surface-transparent-select);
    --sf-table-active-color: var(--sf-on-surface);
    --sf-table-active-bg: var(--sf-surface-transparent-select);
    --sf-table-hover-color: var(--sf-on-surface);
    --sf-table-hover-bg: var(--sf-surface-transparent-hover);
    width: 100%;
    margin-bottom: var(--sf-b6);
    color: var(--sf-table-color);
    vertical-align: top;
    border-color: var(--sf-table-border-color);
    text-align: start;
  }
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    border-bottom-width: var(--sf-px);
    background-image: linear-gradient(var(--sf-table-accent-bg), var(--sf-table-accent-bg));
  }
  .table > tbody {
    vertical-align: inherit;
  }
  .table > thead {
    vertical-align: bottom;
  }
  .table-sm > :not(caption) > * > *,
  .table-small > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
  }
}