@use '@xui/theme-core' as core;

@mixin theme() {
  .x-table {
    width: 100%;
    border-collapse: collapse;

    tbody {
      @include core.typography-level(body-1);

      tr {
        height: 48px;
      }
    }

    th,
    td {
      flex: 1 1 auto;
      padding: 0 12px;

      vertical-align: middle;
    }

    tr {
      border-bottom: 1px solid var(--color-bg-primary);
    }

    thead {
      text-align: left;
      text-transform: uppercase;
      @include core.typography-level(caption);

      th {
        padding-bottom: 8px;
      }
    }
  }
}