@use '../breakpoints';

.sl-c-table {
  margin: var(--sl-gutter--sesqui) 0;
  border: 0;
  width: 100%;
  max-width: 100%;

  td,
  th {
    border: 0;
    padding: var(--sl-gutter--minus) var(--sl-table-cell-padding);
    vertical-align: top;
  }

  th,
  caption {
    text-align: left;
  }

  @include breakpoints.sl-breakpoint--medium-max {
    &-responsive {
      margin-bottom: var(--sl-gutter--sesqui);
      width: 100%;
      overflow: {
        x: auto;
        y: hidden;
      }

      table {
        margin-bottom: 0;
      }

      td {
        white-space: nowrap;
      }
    }
  }
}