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

/* ==========================================================================
   Main content
   ========================================================================== */

.icon-table {
  width: 100%;

  td:nth-child(1),
  td:nth-child(2) {
    font-size: math.div(32px, $base-font-size-px) + em;
    text-align: center;
    padding: math.div(10px, 32px) + em;
    width: 15%;
  }

  td:nth-child(1) {
    width: 8%;
  }

  td:nth-child(2) {
    width: 20%;
  }

  td:nth-child(3) {
    width: 26%;
  }

  // Aliases table.
  td:nth-child(4) {
    width: 46%;
    text-decoration: var(--red) solid line-through;
  }
}

/* Mobile first means all content boxes are full width */

.content-25,
.content-75,
.content-33,
.content-67,
.content-50 {
  padding-bottom: 1em;
  padding-top: 1em;
}

.content-25,
.content-75,
.content-33,
.content-67 {
  @include u-grid-column(12);
}

/* Media Queries
   ========================================================================== */

// Small tablet (600px).
@media only screen and (min-width: 37.5em) {
  // Inner content - nested grid inside content.
  .content-25 {
    @include u-grid-column(3);
  }

  .content-75 {
    @include u-grid-column(9);
  }

  // Inner content - nested grid inside content.
  .content-33 {
    @include u-grid-column(4);
  }

  .content-67 {
    @include u-grid-column(8);
  }

  // Inner content - nested grid inside content.
  .content-50 {
    @include u-grid-column(6);
  }

  // Nested colums don't work yet, so pull the first col back.
  .content-first {
    border-left: 0;
  }

  .content-last {
    border-right: 0;
  }
}
