@use 'sass:math';
@use './vars' as *;
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

/* ==========================================================================
   Design System
   Table Styling
   ========================================================================== */

// Mixins
@mixin u-striped-table() {
  & > tbody > tr:nth-child(even) {
    & > th,
    & > td {
      background: $table-cell-bg-alt;
    }
  }
}

.o-table__cell--right-align {
  text-align: right;
}

.o-table--scrolling {
  box-sizing: border-box;
  overflow-y: hidden;
  table {
    border: 1px solid $table-scrolling-border;

    @include u-striped-table;
  }
}

// Tablet and above.
@include respond-to-min($bp-sm-min) {
  .o-table--striped {
    @include u-striped-table;
  }
}

// We don't want responsive table styles applied to the `print` media type
// so we're not using @include respond-to-max($bp-xs-max ) here.
@media only screen and (max-width: $bp-xs-max) {
  .o-table {
    width: 100%;
  }

  .o-table--striped tr:nth-child(even) {
    & > th,
    & > td {
      background: $table-cell-bg;
    }
  }

  .o-table--stack-on-small {
    border-top: 1px solid var(--gray-40);

    tr,
    td,
    [data-display-table='row'],
    [data-display-table='cell'] {
      display: block;
    }

    th,
    td,
    [data-display-table='cell'] {
      padding-right: 0;
      padding-left: 0;
      width: 100%;
    }

    & > thead,
    [data-display-table='thead'] {
      display: none;
    }

    td[data-label]::before {
      display: block;
      margin-top: 0;
      margin-bottom: math.div(5px, $base-font-size-px) + em;
      content: attr(data-label);

      // Yeilds 1.83333333
      // TODO: Research alternative to this magic number
      line-height: math.div(11, 6);

      // h5 size.
      font-size: math.div($size-v, $base-font-size-px) + em;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    td:last-child,
    [data-display-table='cell']:last-child {
      margin-bottom: math.div(30px, $base-font-size-px) + em;
    }
  }
}