@layer components {
  table {
    width: 100%;
    border-spacing: 0;
  }

  thead th {
    border-bottom: solid 1px var(--gray-7);
    border-left: dashed 1px var(--gray-7);
    border-right: dashed 1px var(--gray-7);
  }

  tbody tr:first-child td {
    border-top: none;
  }

  tbody td {
    border: dashed 1px var(--gray-7);
  }

  th, td {
    padding: var(--size-2);
    white-space: nowrap;
  }

  td.center {
    text-align: center;
  }

  td.number {
    text-align: right;
  }
}