@layer components {
  .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  table {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    thead, tbody {
      th, td {
        text-align: left;
        padding: var(--space-2) var(--space-4);
        &.text-center {
          text-align: center;
        }
      }
    }
    thead {
      background: var(--color-white);
      color: var(--color-gray-900);
      tr th {
        border-bottom: 1px solid var(--color-border);
        background: var(--color-gray-200);
      }
    }
    tbody {
      tr:not(:last-of-type) {
        border-bottom: 1px solid var(--color-border);
      }
      td {
        .table-actions {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: var(--space-4);
        }
      }
    }
  }

  [data-theme="dark"] {
    table {
      background: var(--color-hover);
      thead {
        background: var(--color-surface);
        color: var(--color-white);
        tr th {
          border-bottom: 1px solid var(--color-border);
          background: var(--color-surface);
        }
      }
    }
  }
}