@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

$-table-margin: 0;

.qpp-c-table {
  color: v.$gray-80;
  box-sizing: border-box;

  &::after,
  &::before {
    box-sizing: inherit;
  }

  border-collapse: collapse;
  border-spacing: 0;

  font-family: v.$font-rubik;
  font-size: v.$font-size-16;
  font-weight: v.$font-regular;
  line-height: v.$line-height-lg;
  margin: $-table-margin;

  thead {
    th,
    td {
      background-color: v.$gray-04;
    }
  }

  tr {
    &.qpp-c-table--primary-header {
      color: v.$white;
      th,
      td {
        background-color: v.$blue-80;
      }
    }

    &.qpp-c-table--secondary-header {
      th,
      td {
        background-color: v.$gray-04;
      }
    }
  }

  th {
    font-weight: v.$font-medium;
  }

  td {
    font-weight: v.$font-regular;
  }

  th,
  td {
    border-bottom: f.rem(1px) solid v.$gray-10;
    background-color: v.$white;
    padding: v.$spacing-16 v.$spacing-12;
    text-align: left;
    vertical-align: top;
  }

  th:first-child,
  td:first-child {
    padding-left: v.$spacing-16;
  }

  th:last-child,
  td:last-child {
    padding-right: v.$spacing-16;
  }

  caption {
    background-color: v.$blue-80;
    color: v.$white;
    font-size: v.$font-size-20;
    font-weight: v.$font-regular;
    padding: v.$spacing-16;
    text-align: left;
  }

  ol,
  ul {
    margin: v.$spacing-8 0;
  }

  @include m.media-breakpoint(xs) {
    th:first-child,
    td:first-child {
      padding-left: v.$spacing-40;
    }

    th:last-child,
    td:last-child {
      padding-right: v.$spacing-40;
    }

    caption {
      padding: v.$spacing-24 v.$spacing-40;
    }
  }

  &--secondary,
  &--alt {
    caption {
      background-color: v.$gray-04;
      color: v.$gray-90;
      border-bottom: f.rem(1px) solid v.$gray-10;

      @include m.media-breakpoint(xs) {
        padding: v.$spacing-16 v.$spacing-40;
      }
    }
  }

  /* stylelint-disable selector-no-qualifying-type */
  &--stacked {
    @include m.at-media-max(xs) {
      @include m.table-stacked-styles;
    }

    @include m.at-media(xs) {
      th[data-label] {
        font-weight: v.$font-regular;
      }
    }
  }

  &--stacked-header {
    @include m.at-media-max(xs) {
      @include m.table-stacked-styles;
      @include m.table-stacked-header-styles;
    }

    @include m.at-media(xs) {
      th[data-label] {
        font-weight: v.$font-regular;
      }
    }
  }
  /* stylelint-enable selector-no-qualifying-type */
}

.qpp-c-table-container--scrollable {
  overflow-y: hidden;
  margin: $-table-margin; // swap global margin to container

  .qpp-c-table {
    margin: 0;
  }

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