@use '../variables' as vars;
@use '../functions' as fns;

@mixin table-stacked-styles {
  thead {
    display: none;
  }

  th,
  td {
    border-bottom-width: 0;
    display: block;
    width: 100%;
    padding: vars.$spacing-8 vars.$spacing-16 vars.$spacing-8;
  }

  th:first-child,
  td:first-child {
    padding: vars.$spacing-16 vars.$spacing-16 vars.$spacing-8;
  }

  th:last-child,
  td:last-child {
    padding: vars.$spacing-8 vars.$spacing-16 vars.$spacing-16;
  }

  th:only-child,
  td:only-child {
    padding: vars.$spacing-16;
  }

  tr {
    border-bottom: fns.rem(1px) solid vars.$gray-10;
    border-top-width: 0;
    display: block;
    width: 100%;
    th:first-child,
    td:first-child {
      border-top-width: 0;
    }
    &:nth-child(odd) {
      td,
      th {
        background-color: inherit;
      }
    }

    &:first-child {
      th:first-child,
      td:first-child {
        border-top: fns.rem(1px) solid vars.$gray-10;
      }
    }
  }

  /* stylelint-disable selector-no-qualifying-type */
  th[data-label],
  td[data-label] {
    font-weight: vars.$font-regular;

    &::before {
      content: attr(data-label);
      display: block;
      font-weight: vars.$font-medium;
    }
  }
  /* stylelint-enable selector-no-qualifying-type */
}

@mixin table-stacked-header-styles {
  tr {
    border-bottom: 0;

    td:first-child,
    th:first-child {
      font-family: vars.$font-rubik;
      font-size: vars.$font-size-16;
      line-height: vars.$line-height-subheading;
      background-color: vars.$gray-04;
      color: vars.$gray-80;
      font-weight: vars.$font-medium;
      padding: vars.$spacing-16;
      &::before {
        display: none;
      }
    }
  }

  tr:last-child {
    border-bottom: fns.rem(1px) solid vars.$gray-10;
  }
}